jquery插件之图片轮显（一）

一、效果图：

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

二、jquery源码：

view sourceprint?

01	(function($){

02	//扩展这个方法到jquery;

03	$.fn.extend({

04	//将可选择的变量传递给方法

05	slideimg: function(options) {

06

//参数和默认值

07	var defaults = {

08	tol_class:'.goleftbtn',       //获得点击左按钮的class

09	tor_class:'.gorightbtn',      //获得点击右按钮的class

10	slide_class:'.slide_tolr',    //获得滑动层的class

11	center_class:'.star',         //获得中间点的class

12	maxnum:'5'   //最多滑动次数；

13

};

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

15	var count;

16	var checkname;

17	//遍历匹配元素的集合

18	return this.each(function() {

19	var o =options;

20	//获得最外层的ID;

21	var thisid = $(this).attr("id");

22	var slidebar = $($(this).find(o.slide_class),$(this));

23	var goleftbtn = $($(this).find(o.tol_class),$(this));

24	var gorightbtn = $($(this).find(o.tor_class),$(this));

25	var clickCenter = $($(this).find(o.center_class),$(this));

26

//设置可见层的宽

27	o.slide_wid = slidebar.parent().width()

28	//设置滑动层的宽；

29	slidebar.css("width",o.slide_wid*o.maxnum+"px");

30

31	$(goleftbtn).click(function(){

32	if(count > 1){

33

count--;

34	$("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3");

35	$("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95");

36	slidebar.animate({left:'-' + o.slide_wid*(count-1)},{queue:false});

37

}else{

38	count = o.maxnum;

39	slidebar.animate({left:'-' + o.slide_wid*(count-1)},{queue:false});

40	$("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3");

41	$("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95");

42

}

43

});

44	$(gorightbtn).click(function(){

45	if( count < o.maxnum){

46

count++;

47	slidebar.animate({left:'-' + o.slide_wid*(count-1)},{queue:false});

48	$("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3");

49	$("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95");

50

}else{

51	slidebar.animate({left:'0'},{queue:false});

52	count = 1;

53	$("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3");

54	$("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95");

55

}

56

});

57	$(clickCenter).click(function(){

58	checkname = $(this).attr("name");

59	count = checkname;

60	slidebar.animate({left:'-' + o.slide_wid*(count-1)},{queue:false});

61	$("#"+ thisid +" "+o.center_class+" img").css("opacity","0.3");

62	$("#"+ thisid +" "+o.center_class + count + " img").css("opacity","0.95");

63

});

64

});

65

}

66

});

67	})(jQuery);

三、HTML:

view sourceprint?

1	<script language="javascript">

2	$(document).ready(function(){

3	$("#slideimgbar").slideimg();

4	$("#slideimgbar0").slideimg();

5

});

6

</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>

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

四、样式表：

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