话不多说，请看具体示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> *{ margin:0; padding:0; } html, body { position: relative; height: 100%; } body { background: #eee; font-size: 14px; color:#000; margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } #banner1{ width:500px; } .banner{ width: 500px; height:100px; border:1px solid red; position: relative; margin:40px auto 0; overflow: hidden; } .banner ul{ width:9999px; position: absolute; top:0; left: 0; height: 100%; } .banner li{ width:500px; float: left; height: 100%; line-height: 100px; } .banner li a{ display: block; background:green; font-size:30px; text-align: center; } .cur{ height: 20px; position: absolute; right: 0; bottom:10px; text-align: center; } .cur a{ display: inline-block; width: 20px; height: 20px; background:yellow; margin-left:2px; } .cur a.active{ background:red; } .prve{ position: absolute; top:50%; left: 0; width:30px; height: 30px; background: red; line-height: 30px; text-align:center; color:#fff; margin-top:-15px; } .next{ position: absolute; top:50%; right: 0; width:30px; height: 30px; background: red; line-height: 30px; text-align:center; color:#fff; margin-top:-15px; } </style> </head> <body> <div> <ul> <li><a href="###">1</a></li> <li><a href="###">2</a></li> <li><a href="###">3</a></li> </ul> <div></div> <div><</div> <div>></div> </div> <script> $(function(){ cc("banner1",500); }); function cc(id,w){ var i=0; var id=$("#"+id); var tab=id.children(".tab"); var tabLi=tab.find("li"); var clone=tabLi.first().clone(); tab.append(clone); var size=tab.find("li").size(); var cur=id.children(".cur"); var curA=cur.children("a"); var prve=id.children(".prve"); var next=id.children(".next"); for(var j=0;j<size-1;j++){ cur.append("<a href='###'></a>"); } cur.find("a").first().addClass("active"); /*鼠标划入圆点*/ cur.find("a").hover(function(){ var index=$(this).index(); i=index; tab.stop().animate({left:-index*w},500) $(this).addClass("active").siblings().removeClass("active") }); /*自动轮播*/ var t=setInterval(function(){ i++; move() },2000) /*对banner定时器的操作*/ id.hover(function(){ clearInterval(t); },function(){ t=setInterval(function(){ i++; move(); },2000) }); /*向左的按钮*/ prve.click(function(){ i--; move(); }); /*向右的按钮*/ next.click(function(){ i++; move(); }); function move(){ if(i==size){ tab.css({left:0}); i=1; }; if(i==-1){ tab.css({left:-(size-1)*w}); i=size-2; }; tab.stop().animate({left:-i*w},500); if(i==size-1){ cur.children("a").eq(0).addClass("active").siblings().removeClass("active") }else{ cur.children("a").eq(i).addClass("active").siblings().removeClass("active") }; }; } </script> </body> </html>