<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播</title> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <style type="text/css"> *{margin:0;padding:0;list-style:none;} .banner{position:relative;overflow:hidden;margin:100px auto;width:500px;height:300px;border:1px solid grey;} .banner .img{position:absolute;top:0;left:0;width:5000px;} .banner .img img{width:500px;height:300px;} .banner .img li{float:left;} .banner .img li a{display:block;border:none;} .banner .num{position:absolute;bottom:10px;left:0;width:100%;text-align:center;font-size:0;} .banner .num li{display:inline-block;margin:0 3px;width:10px;height:10px;border-radius:50%;background-color:#888;cursor:pointer;} .banner .num li.on{background-color:#ff6a00;} .banner .btn{position:absolute;top:50%;display:none;margin-top:-25px;width:30px;height:50px;background-color:grey;color:#fff;text-align:center;font-size:40px;font-family:"宋体";line-height:50px;opacity:.5;cursor:pointer;filter:alpha(opacity:.5);} .banner .btn_l{left:0;} .banner .btn_r{right:0;} .banner:hover .btn{display:block;} </style> </head> <body> <div class="banner"> <ul class="img"> <li><a href="#"><img src="image/qsmy1.png" /></a></li> <li><a href="#"><img src="image/qsmy2.png" /></a></li> <li><a href="#"><img src="image/qsmy3.png" /></a></li> <li><a href="#"><img src="image/qsmy4.png" /></a></li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div> </body> <script type="text/javascript"> $(function() { var i = 0; var clone = $(".banner .img li").first().clone(); //克隆第一张图片 $(".banner .img").append(clone); //复制到列表最后 var size = $(".banner .img li").size(); for (var j = 0; j < size - 1; j++) { $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass("on"); /*自动轮播*/ var t = setInterval(function() { i++; move(); }, 2000); /*鼠标悬停事件*/ $(".banner").hover(function() { clearInterval(t); //鼠标悬停时清除定时器 }, function() { t = setInterval(function() { i++; move(); }, 2000); //鼠标移出时清除定时器 }); /*鼠标滑入原点事件*/ $(".banner .num li").hover(function() { var index = $(this).index(); //获取当前索引值 i = index; $(".banner .img").stop().animate({ left: -index * 500 }, 500); $(this).addClass("on").siblings().removeClass("on"); }); /*向左按钮*/ $(".banner .btn_l").click(function() { i++; move(); }) /*向右按钮*/ $(".banner .btn_r").click(function() { i--; move(); }) /*移动事件*/ function move() { if (i == size) { $(".banner .img").css({ left: 0 }); i = 1; } if (i == -1) { $(".banner .img").css({ left: -(size - 1) * 500 }); i = size - 2; } $(".banner .img").stop().animate({ left: -i * 500 }, 500); if (i == size - 1) { $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on"); } else { $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on"); } } }); </script> </html>