图片轮播图插件

Posted 2020-08-06 荆棘鸟的感动

闲来无事，自己搞了一个图片轮播的jQuery插件，话不多说，直接上代码咯！！！！！

1、html模块的代码很简单。写一个容器就可以了，之后往里面加入图片轮播的效果

 

<div class="index-banner" id="banner"></div>

View Code

2、样式代码

 1       .index-banner  {
 2             position: relative;
 3             width:1280px;
 4             height: 461px;
 5             margin:0 auto;
 6             overflow: hidden;
 7         }
 8         .index-banner .banner-list{
 9             position: absolute;
10             width:3840px;
11             height: 461px;
12             z-index: 1;
13         }
14         .index-banner .banner-list a{
15             display: block;
16             float: left;
17             width:1280px;
18             height:461px;
19         }
20         .banner1{
21             background: url("../Pictures/tooopen_sy_158723161481.jpg") no-repeat;
22         }
23         .banner2{
24             background: url("../Pictures/m2015030300220997.jpg") no-repeat;
25         }
26         .banner3{
27             background: url("../Pictures/2008080611515815.jpg") no-repeat;
28         }
29         .banner4{
30             background: url("../Pictures/53310080201004241856521800459127582_005.jpg") no-repeat;
31         }
32         .banner5{
33             background: url("../Pictures/2008080611515815.jpg") no-repeat;
34         }
35         .index-banner .slide{
36             position: absolute;
37             z-index: 2;
38             left:50%;
39             margin-left:-5px;
40             bottom: 20px;
41         }
42         .index-banner .slide span{
43             display: inline-block;
44             cursor: pointer;
45             margin-right: 10px;
46             width: 10px;
47             height: 10px;
48             border-radius: 50%;
49             background-color: #fff;
50         }
51         .index-banner .slide .active{
52             background-color: #000;
53         }
54         .arrow {
55             cursor: pointer;
56             position: absolute;
57             z-index: 2;
58             top: 180px;
59             display: none;
60             line-height: 70px;
61             text-align: center;
62             vertical-align: middle;
63             font-size: 35px;
64             font-weight: bold;
65             width: 50px;
66             height: 70px;
67             background-color: RGBA(0,0,0,.3);
68             color: #fff;
69         }
70         .arrow:hover { background-color: RGBA(0,0,0,.7);}
71         .index-banner:hover .arrow { display: block;}
72         #prev { left: 20px;}
73         #next { right: 20px;}

View Code

3、js控制代码

 1    $(function () {
 2         var banner= $(\'#banner\');
 3         var index = 1;//当前的索引号  初始化为1
 4         var interval = 5000;
 5         var timer;
 6         var number=5; //图片的数量
 7         var imageWidth=1280;
 8         banner.append("<div class=\'banner-list\' id=\'banner_list\' style=\'left: -1280px;\'></div>")
 9         banner.append(" <div class=\'slide\' id=\'slideBtn\'>");
10         banner.append(" <a href=\'javascript:;\' id=\'prev\' class=\'arrow\'>&lt;</a><a href=\'javascript:;\' id=\'next\' class=\'arrow\'>&gt;</a>")
11 
12         $(\'#banner_list\').css(\'width\',imageWidth*number);
13         for(i=1;i<=number;i++){
14             $(\'#banner_list\').append(" <a  class=\'banner"+i+"\' ></a>");
15             $("#slideBtn").append(" <span index=\'"+i+"\' ></span>")
16         }
17         $("#slideBtn span").eq(0).addClass(\'active\');
18         //图片切换函数
19         function animate (offset) {
20             var left = parseInt($(\'#banner_list\').css(\'left\')) + offset;
21             if (offset>0) {
22                 offset = \'+=\' + offset;
23             }
24             else {
25                 offset = \'-=\' + Math.abs(offset);
26             }
27             $(\'#banner_list\').animate({\'left\': offset}, 500, function () {
28                 console.log(left)
29                 if(left > 0){
30                     $(\'#banner_list\').css(\'left\',-imageWidth*4);
31                 }
32                 if(left < -imageWidth*4) {
33                     $(\'#banner_list\').css(\'left\',0);
34                 }
35             });
36         }
37        //下边的小点控制
38         function showButton() {
39             $(\'#slideBtn span\').eq(index-1).addClass(\'active\').siblings().removeClass(\'active\');
40         }
41         //定时器，每Interval执行一次图片切换
42         function play() {
43             timer = setTimeout(function () {
44                 $(\'#next\').trigger(\'click\');
45                 play();
46             }, interval);
47         }
48         function stop() {
49             clearTimeout(timer);
50         }
51 
52         $(\'#next\').bind(\'click\', function () {
53             if ($(\'#banner_list\').is(\':animated\')) {
54                 return;
55             }
56             if (index == 5) {
57                 index = 1;
58             }
59             else {
60                 index += 1;
61             }
62             animate(-imageWidth);
63             showButton();
64         });
65 
66         $(\'#prev\').bind(\'click\', function () {
67             if ($(\'#banner_list\').is(\':animated\')) {
68                 return;
69             }
70             if (index == 1) {
71                 index = 5;
72             }
73             else {
74                 index -= 1;
75             }
76             animate(imageWidth);
77             showButton();
78         });
79 
80         $(\'#slideBtn span\').each(function () {
81             $(this).bind(\'click\', function () {
82                 if ($(\'#banner_list\').is(\':animated\') || $(this).attr(\'class\')==\'active\') {
83                     return;
84                 }
85                 var myIndex = parseInt($(this).attr(\'index\'));
86                 var offset = -imageWidth * (myIndex - index);
87 
88                 animate(offset);
89                 index = myIndex;
90                 showButton();
91             })
92         });
93 
94         banner.hover(stop, play);
95 
96         play();
97 
98     });

View Code