jquery插件之图片轮显（一）

一、效果图：

tips:源码下载：https://files.cnblogs.com/waitingbar/text.rar

二、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
               maxnum:'5'   //最多滑动次数；
            }; 
            var options = $.extend(defaults, options); 
            var count;
            var checkname;
            //遍历匹配元素的集合
            return this.each(function() {
            var o =options;
            //获得最外层的ID; 
            var thisid = $(this).attr("id");
            var slidebar = $($(this).find(o.slide_class),$(this));
            var goleftbtn = $($(this).find(o.tol_class),$(this));
            var gorightbtn = $($(this).find(o.tor_class),$(this));
            var clickCenter = $($(this).find(o.center_class),$(this));
            //设置可见层的宽
            o.slide_wid = slidebar.parent().width()
            //设置滑动层的宽；
            slidebar.css("width",o.slide_wid*o.maxnum+"px"); 

            $(goleftbtn).click(function(){
                if(count > 1){
                  count--;
                  $("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3");
                   $("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95");
                  slidebar.animate({left:'-' + o.slide_wid*(count-1)},{queue:false});
                }else{
                  count = o.maxnum;
                  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");
                }
            });
            $(gorightbtn).click(function(){
                if( count < o.maxnum){
                  count++;
                  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");      
                }else{
                  slidebar.animate({left:'0'},{queue:false});
                  count = 1;
                  $("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3");
                   $("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95");
                }
            });
            $(clickCenter).click(function(){     
                   checkname = $(this).attr("name");
                   count = checkname;
                   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:

<script language="javascript">
$(document).ready(function(){
    $("#slideimgbar").slideimg();
    $("#slideimgbar0").slideimg();
});
</script>

<div id="slideimgbar">
      <div class="slidetolrbar4">
        <div class="slide_tolr">
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/1.jpg" /></dd>
            <dt><a href="#">这是标题1</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/5.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/1.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/2.jpg" /></dd>
            <dt><a href="#">这是标题2</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/3.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/4.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/5.jpg" /></dd>
            <dt><a href="#">这是标题3</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/6.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/7.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/8.jpg" /></dd>
            <dt><a href="#">这是标题4</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/9.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/10.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/11.jpg" /></dd>
            <dt><a href="#">这是标题5</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/12.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <dl class="dl_line1l_3">
            <dd class="imgborder img96_67"><img src="../images/demoimg/13.jpg" /></dd>
            <dt><a href="#">这是标题</a></dt>
          </dl>
          <div class="clear"></div>
        </div>
      </div>
      <div class="to_lr_btn">
        <a class="goleftbtn" href="javascript:void(0)"><img src="../images/slideimg/goleftbtn.gif" /></a>
        <span name="1" class="star star1"><img src="../images/slideimg/cir.gif" /></span>
        <span name="2" class="star star2"><img src="../images/slideimg/cir.gif" /></span>
        <span name="3" class="star star3"><img src="../images/slideimg/cir.gif" /></span>
        <span name="4" class="star star4"><img src="../images/slideimg/cir.gif" /></span>
        <span name="5" class="star star5"><img src="../images/slideimg/cir.gif" /></span>
        <a class="gorightbtn" href="javascript:void(0)"><img src="../images/slideimg/gorightbtn.gif" /></a>
        </div>
    </div>

（附：下载文件内）。。。

四、样式表：

（附：下载文件内）。。。