<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>jquery轮播</title> <script type="text/javascript" src="js/jquery.js"> </script> </head> <style> *{ padding:0px; margin:0px;list-style:none;} .ad { width:586px; height:150px; margin:5px auto; border:1px solid #808080; position:relative; overflow:hidden; } .ad .slider{ width:5860px; position:absolute; left:0px; top:0px; } .ad .slider img{ width:586px; height:150px;} .ad .slider li{ float:left; } .ad .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px; } .ad .num li { width:10px; height:10px; background-color:#888; border-radius:50%; display:inline-block; margin:0px 3px; cursor:pointer;} .ad .num li.on { background-color: #ff6a00; } .ad .btn { width: 30px; height: 50px; background-color: #808080; opacity: 0.5; filter:alpha(opacity:0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; font-size:40px; color:#fff; font-family:"宋体"; display:none; } .ad .btn_l { left:0px; } .ad .btn_r { right:0px; } .ad:hover .btn { display:block; } </style> <body> <div class="ad"> <ul class="slider"> <li><img src="img/s1.png" alt="" /></li> <li><img src="img/s2.png" alt="" /></li> <li><img src="img/s3.png" alt="" /></li> <li><img src="img/u0.jpg" alt="" /></li> <li><img src="img/user2.jpg" alt=""/></li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div> <script type="text/javascript"> $(document).ready(function () { var i = 0; var clone = $(".ad .slider li").first().clone();//克隆第一张图片 $(".ad .slider").append(clone);//复制到列表最后 var size = $(".ad .slider li").size(); for (var j = 0; j < size-1; j++) { $(".ad .num").append("<li></li>"); } $(".ad .num li").first().addClass("on"); /*自动轮播*/ var t = setInterval(function () { i++; move();},2000); /*鼠标悬停事件*/ $(".ad").hover(function () { clearInterval(t);//鼠标悬停时清除定时器 }, function () { t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器 }); /*鼠标滑入原点事件*/ $(".ad .num li").hover(function () { var index = $(this).index();//获取当前索引值 i = index; $(".ad .slider").stop().animate({ left: -index * 586 }, 500); $(this).addClass("on").siblings().removeClass("on"); }); /*向左按钮*/ $(".ad .btn_l").click(function () { i++; move(); }) /*向右按钮*/ $(".ad .btn_r").click(function () { i--; move(); }) /*移动事件*/ function move() { if (i == size) { $(".ad .slider").css({ left: 0 }); i = 1; } if (i == -1) { $(".ad .slider").css({ left: -(size - 1) * 586 }); i = size - 2; } $(".ad .slider").stop().animate({ left: -i * 586 }, 500); if (i == size - 1) { $(".ad .num li").eq(0).addClass("on").siblings().removeClass("on"); } else { $(".ad .num li").eq(i).addClass("on").siblings().removeClass("on"); } } }); </script> </body> </html>