jquery插件之圖片輪顯（一）

1、效果圖：

tips:源碼下載：http://files.cnblogs.com/waitingbar/text.rar

2、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);

3、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>

（附：下載文件內）。。。

4、樣式表：

（附：下載文件內）。。。