你的位置:首页 > Java教程

[Java教程]图片轮播图插件


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