无图片，直接cytl+v。方便直接了解，轮播图原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script> <style> *{margin: 0;padding:0;} li{list-style-type: none;} .box{ width: 500px;height: 300px;position: relative; } .charset{ height: 300px;width: 100%; position: relative;} .charset li{ height: 300px;position: absolute;top:0;left: 0;width: 100%;display: none;} .but{position: absolute;top: 30%; width:60px;height: 100px;background-color: red; } .pre{left: 0px;} .net{right: 0px;} .num{text-align: center; position: absolute;left: 0; bottom: 0px;width: 100%;z-index: 5 } .num li{width: 10px;height: 10px;background-color: #fff;border-radius: 50%;display: inline-block;margin: 0 5px;} .num .on{background-color: blue} .nut{ position: absolute;left: 0; bottom: 0px;width: 100%;height: 30px; z-index: 10;background:red;} .nut li{color: #fff;display: inline-block;} </style> </head> <body> <div class="box"> <ul class="charset"> <li style="background-color:red"></li> <li style="background-color:black"></li> <li style="background-color:#aaa"></li> </ul> <div class="but pre"></div> <div class="but net"></div> <ul class="num"> </ul> <ul class="nut"> <li class="out">1</li> <li>2</li> <li>3</li> </ul> </div> <script> $(function(){ var len=$('.charset li').length for (var i=0;i<len;i++){ $('.num').append("<li></li>"); $('.num li').first().addClass('on'); } $('.num li').mouseover(function() { var index = $(this).index(); $(this).addClass('on').siblings().removeClass('on'); $('.nut li').addClass('out').siblings().removeClass('out'); $('.charset li').eq(index).siblings().fadeIn().fadeOut(); }) var i=0; function net(){ i++ if (i>len) { i=0; } $('.charset li').eq(i).fadeIn().siblings().fadeOut(); $('.nut li').eq(i).addClass('out').siblings().removeClass('out'); $('.num li').eq(i).addClass('on').siblings().removeClass('on'); } function pre(){ i-- if (i<0) { i=len; } $('.charset li').eq(i).fadeIn().siblings().fadeOut(); $('.nut li').eq(i).addClass('out').siblings().removeClass('out'); $('.num li').eq(i).addClass('on').siblings().removeClass('on'); } $('.pre').click(function(){ pre(); }); $('.net').click(function(){ net(); }); var time = setInterval(net,2000) $('.charset').hover(function(){ clearInterval(time); },function(){ time = setInterval(net,2000); }) }) </script> </body> </html>