jQuery制作无缝轮播效果
【一】HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="index.js"></script> </head> <body> <div class="cont"> <div class="imgcont"> <ul class="img"> <li></li> <li></li> <li></li> </ul> </div> <ul class="num"></ul> <span class="btn btnL"><</span> <span class="btn btnR">></span> </div> </body> </html>
【二】css样式
*{ margin: 0; padding: 0; } .cont{ position: relative; width: 600px; height: 300px; padding: 10px; border: 1px solid #333; margin: 150px auto; box-sizing: border-box; .imgcont{ position: relative; width: 578px; height: 278px; overflow: hidden; border: 1px solid #333; .img{ position: absolute; top: 0; left: 0; width: 2500px; list-style: none; overflow: hidden; li{ float: left; } li:nth-child(1){background-color: #c6a0a0;} li:nth-child(2){background-color: #666;} li:nth-child(3){background-color: #CC4A4A;} li:nth-child(4){background-color: #c6a0a0;} } } .btn{ width:30px; height:60px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:60px; color:#fff; font-size:40px; font-family:"宋体"; // display:none; } .btnL{ left: 20px; } .btnR{ right: 20px; } .num{ position: absolute; bottom: 20px; left: 50%; margin-left: -40px; li{ width: 10px; height: 10px; list-style: none; float: left; margin-right: 10px; border-radius: 5px; background-color: #888; } .on{ background-color: #ccc; } } }
【三】jQuery效果
- 完整代码
【详细代码,直观,容易理解,但代码量比较大】 $(function(){ var index = 0;//保存当前图片的下标 //给轮播器的图片添加宽高,使其宽高与图片容器(imgcont)的宽高一致 var $width = $(".imgcont").width(); var $heigth = $(".imgcont").height(); $(".img > li").width($width).height($heigth); // 复制第一个图片到最后一个图片的后面 var $clone = $(".img > li").first().clone(); $(".img").append( $clone ); //添加底部圆点 var $size = $(".img > li").size(); for( var j=1; j < $size; j++ ){ $(".num").append("<li></li>") } // 自动轮播效果 var timer = setInterval(function(){ index++; if( index == $size ){ $(".img").css( { left: 0 } ); index = 1; } $(".img").stop(true,false).animate({left:-index*$width},300); if( index == $size-1 ){ $(".num > li").eq(0).addClass("on").siblings().removeClass("on"); }else{ $(".num > li").eq(index).addClass("on").siblings().removeClass("on"); } },2000) // 鼠标划入取消自动轮播 $(".cont").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ index++; if( index == $size ){ $(".img").css( { left: 0 } ); index = 1; } $(".img").stop(true,false).animate({left:-index*$width},300); },2000) }) // 圆点划入的轮播效果 $(".num li").first().addClass("on"); $(".num > li").hover(function(){ var $index = $(this).index(); index = $index; $(".img").stop(true,false).animate({left:-index*$width},300); //stop(true,false)将未执行的动画队列清空,但不将正在执行的动画跳转到末状态 $(this).addClass("on").siblings().removeClass('on'); }) // 左右按钮的轮播效果 $(".btnL").click(function(){ index++; if( index == $size ){ $(".img").css( { left: 0 } ); index = 1; } $(".img").stop(true,false).animate({left:-index*$width},300); if( index == $size-1 ){ $(".num > li").eq(0).addClass("on").siblings().removeClass("on"); }else{ $(".num > li").eq(index).addClass("on").siblings().removeClass("on"); } }) $(".btnR").click(function(){ index--; if( index == -1 ){ $(".img").css({left:-($size-1)*$width}); index = $size - 2; } $(".img").stop(true,false).animate({left:-index*$width},300); if( index == $size-1 ){ $(".num > li").eq(0).addClass("on").siblings().removeClass("on"); }else{ $(".num > li").eq(index).addClass("on").siblings().removeClass("on"); } }) })
- 精简代码
//【精简版代码】 $(function(){ var index = 0; var $width = $(".imgcont").width(); var $heigth = $(".imgcont").height(); $(".img > li").width($width).height($heigth); var $clone = $(".img > li").first().clone(); $(".img").append( $clone ); var $size = $(".img > li").size(); for( var j=1; j < $size; j++ ){ $(".num").append("<li></li>") } //自动轮播 var timer = setInterval(function(){ index++; move(); },2000) // 鼠标划入取消自动轮播 $(".cont").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ index++; move(); },2000) }) // 圆点划入的轮播效果 $(".num li").first().addClass("on"); $(".num > li").hover(function(){ var $index = $(this).index(); index = $index; $(".img").stop(true,false).animate({left:-index*$width},300); $(this).addClass("on").siblings().removeClass('on'); }) // // 左右按钮的轮播效果 $(".btnL").click(function(){ index++; move(); }) $(".btnR").click(function(){ index--; move(); }) function move(){ if( index == $size ){ $(".img").css( { left: 0 } ); index = 1; } if( index == -1 ){ $(".img").css({left:-($size-1)*$width}); index = $size - 2; } $(".img").stop(true,false).animate({left:-index*$width},300); if( index == $size-1 ){ $(".num > li").eq(0).addClass("on").siblings().removeClass("on"); }else{ $(".num > li").eq(index).addClass("on").siblings().removeClass("on"); } } })