jquery实现左右无缝轮播图
最终显示效果：
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery无缝轮播图片</title> <script src="js/jquery-1.11.3.js"></script> <script src="js/carousel2.js"></script> <link rel="stylesheet" href="css/carousel2.css" /> </head> <body> <div class="banner"> <!--轮播图片--> <ul class="img"> <li> <a href="#"><img src="img/carousel1.jpg" alt="第1张图片"></a> </li> <li> <a href="#"><img src="img/carousel2.jpg" alt="第2张图片"></a> </li> <li> <a href="#"><img src="img/carousel3.jpg" alt="第3张图片"></a> </li> <li> <a href="#"><img src="img/carousel4.jpg" alt="第4张图片"></a> </li> <li> <a href="#"><img src="img/carousel5.jpg" alt="第5张图片"></a> </li> </ul> <!--追加小圆点的位置--> <ul class="num"></ul> <!--左右按钮--> <div class="btn"> <span class="prev"><</span> <span class="next">></span> </div> </div> </body> </html>
CSS3代码：
* { margin: 0; padding: 0; } .img,.num { list-style: none; } .banner { width: 1026px; height: 496px; border: 2px solid #ccc; margin: 100px auto; position: relative; overflow: hidden; } .img { position: absolute; top: 0; left: 0 } .img li { float: left; } .num { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 0; } .num li { width: 10px; height: 10px; background: rgba(0, 0, 0, 0.5); display: block; border-radius: 100%; display: inline-block; margin: 0 5px; cursor: pointer; } .btn { display: none; } .btn span { display: block; width: 50px; height: 100px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 40px; line-height: 100px; text-align: center; cursor: pointer; } .btn .prev { position: absolute; left: 0; top: 50%; margin-top: -50px; } .btn .next { position: absolute; right: 0; top: 50%; margin-top: -50px; } .num .active { background-color: #fff; }
javaScript代码：
$(function() { var i = 0; var timer = null; //创建圆点 for(var j = 0; j < $('.img li').length; j++) { $('.num').append('<li></li>') } //给第一个圆点添加样式 $('.num li').first().addClass('active'); //复制第一张图片 var firstimg = $('.img li').first().clone(); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度 $('.img').append(firstimg).width($('.img li').length * ($('.img img').width())); // 下一个按钮 $('.next').click(function() { i++; if(i == $('.img li').length) { i = 1; //这里不是i=0 //保证无缝轮播，设置left值 $('.img').css({ left: 0 }); }; // i需要乘以图片像素 $('.img').stop().animate({ left: -i * 1026 }, 300); //设置小圆点指示 if(i == $('.img li').length - 1) { $('.num li').eq(0).addClass('active').siblings().removeClass('active'); } else { $('.num li').eq(i).addClass('active').siblings().removeClass('active'); } }) // 上一个按钮 $('.prev').click(function() { i--; if(i == -1) { i = $('.img li').length - 2; $('.img').css({ left: -($('.img li').length - 1) * 1026 }); } $('.img').stop().animate({ left: -i * 1026 }, 300); $('.num li').eq(i).addClass('active').siblings().removeClass('active'); }) //设置按钮的显示和隐藏 $('.banner').hover(function() { $('.btn').show(); }, function() { $('.btn').hide(); }) //鼠标划入圆点 $('.num li').mouseover(function() { var _index = $(this).index(); $('.img').stop().animate({ left: -_index * 1026 }, 150); $('.num li').eq(_index).addClass('active').siblings().removeClass('active'); }) //定时器自动播放 timer = setInterval(function() { i++; if(i == $('.img li').length) { i = 1; $('.img').css({ left: 0 }); }; $('.img').stop().animate({ left: -i * 1026 }, 300); if(i == $('.img li').length - 1) { $('.num li').eq(0).addClass('active').siblings().removeClass('active'); } else { $('.num li').eq(i).addClass('active').siblings().removeClass('active'); } }, 1000) //鼠标移入，暂停自动播放，移出，开始自动播放 $('.banner').hover(function() { clearInterval(timer); }, function() { timer = setInterval(function() { i++; if(i == $('.img li').length) { i = 1; $('.img').css({ left: 0 }); }; $('.img').stop().animate({ left: -i * 1026 }, 300); if(i == $('.img li').length - 1) { $('.num li').eq(0).addClass('active').siblings().removeClass('active'); } else { $('.num li').eq(i).addClass('active').siblings().removeClass('active'); } }, 2000) }) })