jQuery 轮播
html：
<!--banner--><section class="banner" > <div class="container"> <div class="wrapper"> <div class="slide current"><img src="image/banner1.jpg" alt=""/></div> <div class="slide"><img src="image/indexbanner1.jpg" alt=""/></div> <div class="slide"><img src="image/indexbanner2.jpg" alt=""/></div> </div> <!-- Add Pagination --> <div class="pagination"></div> <!-- Add Arrows --> <div class="button-next"> < </div> <div class="button-prev"> > </div> </div></section>CSS:
.banner{ height: 6rem; position: relative; width: 100%; overflow: hidden;}.container { overflow: hidden; height: 6rem; margin: auto; position: relative; text-align: center;}.wrapper{ position: absolute; left:0; top:0;}.slide{ position: absolute; float:left; overflow: hidden; display: none;}.wrapper .current{ display: block;}@-webkit-keyframes animations{ 0%{-webkit-transform:translate(0); } /*100%{-webkit-transform:translate(-1903px); }*/}/* //下标*/.pagination{ position: absolute; bottom:.4rem; left:50%; transform: translate(-50%,0);}.pagination li{ list-style-type: none; float:left; display: inline-block; margin: 0 10px; cursor:pointer; border-radius: 50%; width: .25rem; height: .25rem;line-height: .25rem;}.pagination li.current{ border:solid 1px #fff;}.pagination li > span{ display: inline-block; width: .1rem; height: .1rem; margin: auto; background: #fff; border-radius: 50%;}.button-next,.button-prev{ font-size: 20px; color:#fff; position: absolute; top:50%;}.button-next{ left:0px;}.button-prev{ right:0px;}JS:/*banner轮播*/var slide = $('.container .wrapper .slide'); //单个var With = $('body').width();$('.container').css({'width':With}); //最外布局$('.container .wrapper').css({'width':With*slide.length});var ul_index = "<ul>";for(var i=0;i<slide.length;i++){ ul_index += "<li><span></li>"}ul_index += "</ul>";$('.pagination').append(ul_index);var s = $('.pagination');$('.pagination li').first().addClass('current');var a = 0;//保存下标var len = $('.wrapper .slide').length-1 ;//点击左边切换$('.button-next').click(function(){ if(a ==0){ a = len; }else{ a--; } $('.wrapper .slide').eq(a).fadeIn().siblings().hide(); $('.pagination li').eq(a).addClass('current').siblings().removeClass('current');});//点击右边切换$('.button-prev').click(function(){ if(a == len){ a = 0; }else{ a++; } $('.wrapper .slide').eq(a).fadeIn().siblings().hide(); $('.pagination li').eq(a).addClass('current').siblings().removeClass('current');});//鼠标移动到下标点上var tions = $('.pagination li');for(var is = 0;is<tions.length;is++){ tions[is].index = is; tions[is].onmouseover=function(){ $('.wrapper .slide').eq(this.index).fadeIn().siblings().hide(); $('.pagination li').eq(this.index).addClass('current').siblings().removeClass('current'); }}var time;//自动轮播function autoFng(){ time = setInterval(function(){ if(a == len){ a = 0; }else{ a++; } $('.wrapper .slide').eq(a).fadeIn(3000).siblings().hide(); $('.pagination li').eq(a).addClass('current').siblings().removeClass('current'); },3000);}autoFng();$('.container').mouseover(function(){ clearInterval(time);});$('.container').mouseout(function(){ autoFng();});