jQuery 轮播图
CSS代码：
1 <style> 2 body,div,img,p,ul,li{padding:0px;margin:0px;} 3 /*多个img之间缝隙问题*/ 4 img{float:left;} 5 .img-wrap{overflow: hidden; position: relative;} 6 /*.pagewrap{position: absolute; margin-top:-250px; padding:0px 100px; }*/ 7 .pagewrap .pageleft{ background:rgba(0,0,0,.6);position: absolute; left:10%; cursor: pointer; color: #fff;} 8 .pagewrap .pageright{ background:rgba(0,0,0,.6); position: absolute; right:10%;cursor: pointer;color: #fff;} 9 /**圆点样式*/ 10 .Dot{height:25px;width: 105px; position: absolute;margin-top:-40px; left:50%; margin-left:-52px;} 11 .Dot ul{ } 12 .Dot ul li{ list-style: none; float: left; width: 20px; height:20px; border-radius: 10px; background:#fff; text-align:center;line-height: 20px; margin-left:5px; cursor: pointer;} 13 .Dot ul li.active{background:#a6c1f7; color:red;} 14 15 </style>
HTML代码
1 <body> 2 <div style="overflow: hidden;"> 3 <div class="img-wrap"> 4 <img src="Carouselfigure/timg.jpg"/> 5 <img src="Carouselfigure/timg1.jpg"/> 6 <img src="Carouselfigure/timg2.jpg"/> 7 <img src="Carouselfigure/timg3.jpg"/> 8 </div> 9 </div> 10 <div class="pagewrap"> 11 <span class="pageleft">上一页</span> 12 <span class="pageright">下一页</span> 13 </div> 14 <div class="Dot"> 15 <ul> 16 <li class="active">1</li> 17 <li>2</li> 18 <li>3</li> 19 <li>4</li> 20 </ul> 21 </div> 22 </body>
JS代码
1 <script type="text/javascript"> 2 $(function(){ 3 //获取可见宽度,window.innerWidth获得包括纵向滚动条的宽度，documentElement.clientWidth;获得宽度不稳定 4 //var imgwidth = document.documentElement.clientWidth; 5 var imgwidth = window.innerWidth; 6 //设置图片宽度和 7 $(".img-wrap").children("img").css("width", imgwidth); 8 //切换的图片数量 9 var imgnumber = $(".img-wrap").children("img").length; 10 //容器宽度 11 var Twidth = imgwidth *imgnumber 12 $(".img-wrap").css("width", Twidth); 13 //上一页下一页位置计算 14 var imgheight = $(".img-wrap").children("img").height(); 15 //imgtop = imgheight/2; 16 $(".pagewrap span").css("top",imgheight/2); 17 // 下一页点击事件 18 var sw = 0; 19 $(".pagewrap .pageright").stop(true,true).click(function(){ 20 autoplay(); 21 }) 22 //上一页事件 23 $(".pagewrap .pageleft").stop(true,true).click(function(){ 24 //debugger; 25 if(sw <=0){ 26 sw =imgnumber; 27 } 28 sw--; 29 leftwidth = sw*imgwidth; 30 //$(".img-wrap").css("left", -sw*imgwidth); 31 $(".img-wrap").animate({left:-leftwidth},800); 32 $(".Dot ul li").eq(sw).addClass("active").siblings().removeClass("active"); 33 }) 34 //圆点和图片绑定事件 35 $(".Dot ul li").click( function(){ 36 $(this).addClass("active").siblings().removeClass("active"); 37 var index = $(this).index(); 38 //console.log(index); 39 sw = index; 40 $(".img-wrap").css("left", -sw*imgwidth); 41 }) 42 //自动播放事件 43 var play =setInterval(autoplay,5000); 44 //鼠标滑过停止自动播放事件 45 $('.img-wrap').mouseover(function(){ 46 clearInterval(play); 47 }); 48 //定时器停止过后重启自动播放 49 $('.img-wrap').mouseout(function(){ 50 play =setInterval(autoplay,5000); 51 }); 52 //轮播函数 53 function autoplay(){ 54 sw++; 55 if(sw ==imgnumber){ 56 sw =0; 57 } 58 leftwidth = sw*imgwidth; 59 //$(".img-wrap").css("left", -sw*imgwidth); 60 $(".img-wrap").animate({left:-leftwidth},800); 61 $(".Dot ul li").eq(sw).addClass("active").siblings().removeClass("active"); 62 } 63 }) 64 </script>
