图片轮播图插件

闲来无事，自己搞了一个图片轮播的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

 

posted @ 2016-09-02 10:51  荆棘鸟的感动  阅读(430)  评论(1)  编辑  收藏  举报