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插件之图片轮显（一）》这一篇章内容做了一下整理，效果图：

三、实现的主要功能有： 

• 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源代码请见下载文件：https://files.cnblogs.com/waitingbar/slideimg2.rar