[原创]Jquery轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery轮播</title> <script src="../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0; padding:0;list-style:none;} .banner{ width:500px; height:200px; position:relative; overflow:hidden;} .box{ font-size:16px; font-family:Arial; font-weight:bold; color:#fff;} .a{ width:500px; height:200px; position:relative; left:0px; float:left;} .b{ background-color:Green; width:240px; height:180px; position:absolute; left:10px; top:10px;} .c{ background-color:Orange; width:240px; height:180px; position:absolute; left:260px; top:10px;} .d{ background-color:Silver; width:480px; height:180px;position:absolute; left:20px; top:10px;} .e{ background-color:Fuchsia; width:240px; height:180px; position:absolute; left:10px; top:10px;} .f{ background-color:Maroon; width:240px; height:180px; position:absolute; left:260px; top:10px;} .dot{ width:100%; text-align:center; position:absolute; bottom:20px;} .dot li{width:10px; height:10px; margin:0 3px; display:inline-block; border:1px solid #ccc;} .dotli1{ background-color:Teal;} .dotli2{ background-color:Orange;} </style> <script type="text/javascript"> var z = 0; //开启轮播动画 function startAnimate(j) { var n = $(".a").length; var timer = setInterval(function () { if (j == 0) { z = 0; } if (j == n-1) { z = 1; } if (z == 0) { j++; } else { j--; } $(".dot li:eq(" + j + ")").click(); }, 1000); return timer; } //结束轮播动画 function stopAnimate(timer) { clearInterval(timer); } $(function () { //轮播元素个数 var n = $(".a").length; //每个轮播元素的宽度 var animateWidth = 500; //全部轮播元素的长度和 var boxWidth = (n * animateWidth) + "px"; $(".box").css("width", boxWidth); //开启轮播 var timer = startAnimate(0); var j = -1; //触发焦点事件 $(".dot li").click(function () { var i = $(this).index(); $(".dot li").each(function () { $(this).attr("class", "dotli2"); if ($(this).index() == i) { $(this).attr("class", "dotli1"); } }); if (j > -1) { $(".a:eq(" + j + ")").stop(); } //轮播元素动画 $(".a").stop().animate({ "left": parseInt(-animateWidth * i) + "px" }); j = i; }); //焦点鼠标事件 $(".dot li").mousedown(function () { stopAnimate(timer); var i = $(this).index(); timer = startAnimate(i); }); }); </script> </head> <body> <div class="banner"> <div class="box"> <div class="a"> <div class="b">1</div> <div class="c"></div> </div> <div class="a"> <div class="d">2</div> </div> <div class="a"> <div class="e">3</div> <div class="f"></div> </div> <div class="a"> <div class="b">4</div> <div class="c"></div> </div> <div class="a"> <div class="d">5</div> </div> <div class="a"> <div class="e">6</div> <div class="f"></div> </div> </div> <div class="dot"> <ul> <li class="dotli1"></li> <li class="dotli2"></li> <li class="dotli2"></li> <li class="dotli2"></li> <li class="dotli2"></li> <li class="dotli2"></li> </ul> </div> </div> </body> </html>