<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #eeeeee; } .warp{ position: relative; width: 500px; height: 300px; margin: 50px auto; overflow: hidden; } .btns{ position: absolute; right: 30px; bottom: 30px; z-index: 2; } .btns li{ display: block; float: left; width: 14px; height: 14px; background-color: #ffffff; border-radius: 7px; margin-left: 5px; font-size: 12px; text-align: center; line-height: 14px; color: red; cursor: pointer; } .btns li.active{ background-color: green; } .box{ width: 1500px; height: 300px; position: absolute; left: 0; top: 0; } .box li{ display: block; width: 500px; height: 300px; float: left; } .box li.no1{background-color: black;} .box li.no2{background-color: orange;} .box li.no3{background-color: pink;} </style> </head> <body> <div class="warp" id="warp"> <ul id="btns" class="btns"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <ul class="box" id="box"> <li class="no1">1</li> <li class="no2">2</li> <li class="no3">3</li> </ul> </div> <script src="js/jQuery-v1.8.3.js"></script> <script> $(function () { var btns = $('#btns li'), box = $('#box'), warp = $('#warp'), w = 500, iNow = 0. timer = null; function autoMove() { iNow++; if (iNow === btns.length) { iNow = 0; } btns.eq(iNow).addClass('active').siblings().removeClass('active'); box.stop().animate({left : -w * iNow}); } timer = setInterval(autoMove, 1000); btns.on({ 'mouseover' : function () { clearInterval(timer); var my = $(this), i = my.index(); iNow = i-1; autoMove(); } }); warp.on({ 'mouseover' : function () { clearInterval(timer); }, 'mouseout' : function () { timer = setInterval(autoMove, 1000); } }); }); </script> </body> </html>