jquery插件之图片轮显(一)----整理2011.02.24

一、心得:

      从今年第一天上班开始,一直在学习jquery插件方面的知识,到现在也快有两个星期了,感觉学好这插件不难。因为想学好它,所以一直都很努力!

总结jquery插件书写格式为(如有错误,欢迎指正!):

(function($){

    //扩展这个方法到jquery;

    $.fn.extend({   

        //将可选择的变量传递给方法如:slideimg

        slideimg: function(options) {  

            //参数和默认值

            var defaults = {

            //默认内容区

            }; 

            var options = $.extend(defaults, options); 



            //遍历匹配元素的集合

            return this.each(function() {

            //执行内容区: 



            });  

        }  

    });  

})(jQuery);

二、近两天,《jquery插件之图片轮显(一)》这一篇章内容做了一下整理,效果图:

pic2

三、实现的主要功能有: 

    1. 左右点击移动;
    2. 中间小圆点点击移动;
    3. 自动运行(暂定);
    4. 可任意添加图片的数量;
    5. 小圆点会根据图片的多少而自动增减;
    6. 可以选择或取消小圆点的显示(默认为显示cen_dot_bar:'ture',取消可设置cen_dot_bar为其它任意非'ture'的值);
    7. 。。。

    四:jquery源码:

    (function($){ 
    
        //扩展这个方法到jquery; 
    
        $.fn.extend({   
    
            //将可选择的变量传递给方法 
    
            slideimg: function(options) {  
    
                //参数和默认值 
    
                var defaults = { 
    
                   tol_class:'.goleftbtn',       //获得点击左按钮的class 
    
                   tor_class:'.gorightbtn',      //获得点击右按钮的class 
    
                   slide_class:'.slide_tolr',    //获得滑动层的class 
    
                   center_class:'.star',         //获得中间点的class 
    
                   imgshow_num:'3',      //最多可见图片的张数; 
    
                   cen_dot_bar:'ture',   //当cen_dot_bar为'ture'时中间显示,否则关闭; 
    
                   gostart_on:'ture',   //自动运行开关 
    
                   dotimg_src:'../images/slideimg/cir.gif',   //中间点src 
    
                   centerbar_class:'.center_dot',              //中间点所在层的class 
    
                   runtime:'2000'      //自动运行时间 
    
                }; 
    
                options = $.extend(defaults, options); 
    
                var count = 1; 
    
                var checkname; 
    
                //遍历匹配元素的集合 
    
                return this.each(function() { 
    
                var o =options; 
    
                //获得最外层的ID; 
    
                var thisid = $(this).attr("id"); 
    
                //转化:去除中间点的class的’.‘ 
    
                var cenclass =o.center_class.substr('1'); 
    
                //获得中间点击点处的class 
    
                var centerBar = $($(this).find(o.centerbar_class),$(this)); 
    
                var slidebar = $($(this).find(o.slide_class),$(this)); 
    
                //最多滑动的次数(Math.ceil()方法向上取整) 
    
                o.maxnum = Math.ceil(slidebar.children().prev().size()/o.imgshow_num); 
    
                //设置可见层的宽 
    
                o.slide_wid = slidebar.parent().width(); 
    
                //设置滑动层的宽; 
    
                slidebar.css("width",o.slide_wid*o.maxnum+"px"); 
    
                //添加中间处的点击点 
    
                if(o.cen_dot_bar === 'ture'){ 
    
                    for( i=1;i<=o.maxnum;i++){ 
    
                        $(centerBar).append( 
    
                            "<span" + ' ' + "name="+i+ " " +"class="+"'"+cenclass+' '+cenclass+i +"'" + ">"+"<img src="+ o.dotimg_src +" />"+"</span>" 
    
                        ); 
    
                    } 
    
                } 
    
                var goleftbtn = $($(this).find(o.tol_class),$(this)); 
    
                var gorightbtn = $($(this).find(o.tor_class),$(this)); 
    
                var clickCenter = $($(this).find(o.center_class),$(this)); 
    
                //点击向左按钮时; 
    
                $(goleftbtn).click(function(){ 
    
                    if(count > 1){ 
    
                      count--; 
    
                      com_cen_src(); 
    
                    }else{ 
    
                      count = o.maxnum; 
    
                      com_cen_src(); 
    
                    } 
    
                }); 
    
                //点击向右按钮时; 
    
                $(gorightbtn).click(function(){ 
    
                    if( count < o.maxnum){ 
    
                      count++; 
    
                      com_cen_src();      
    
                    }else{ 
    
                      slidebar.animate({left:'0'},{queue:false}); 
    
                      count = 1; 
    
                      com_cen_src(); 
    
                    } 
    
                }); 
    
                //点击中间点时 
    
                $(clickCenter).click(function(){     
    
                       checkname = $(this).attr("name"); 
    
                       count = checkname; 
    
                       com_cen_src(); 
    
                }); 
    
                //调置中间点击处的透明度 
    
                $(o.center_class+" img").css({"opacity":"0.3","cursor":"pointer"}); 
    
                $(o.center_class+"1"+" img").css("opacity","0.95"); 
    
                $(o.tol_class+" img" +","+o.tor_class+" img").css("opacity","0.3"); 
    
                $(o.tol_class+" img" +","+o.tor_class+" img").hover(function(){ 
    
                    $(this).css("opacity","1");  
    
                    },function(){ 
    
                    $(this).css("opacity","0.4");  
    
                });
    
                function com_cen_src(){ 
    
                    slidebar.animate({left:'-' + o.slide_wid*(count-1)},{queue:false}); 
    
                    $("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3"); 
    
                    $("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95"); 
    
                } 
    
                });  
    
            }  
    
        });  
    
    })(jQuery);

    五:相关HTML、CSS源代码请见下载文件http://files.cnblogs.com/waitingbar/slideimg2.rar

    你可能感兴趣的:(jquery插件)