1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ul{padding: 0;margin: 0;border: 0;} 8 9 .slider{width: 400px;height: 400px;position: relative;margin: 0 auto; 10 } 11 .slider ul{width: 400px;height: 400px;margin-left: 50px;} 12 .slider li{width: 400px;height: 400px;position: absolute;top: 0; left: 0;list-style: none;} 13 .slider li img{width: 400px;height: 400px;position: relative; 14 } 15 .left{width:50px; height:50px; position: absolute;top:175px;left: -50px;background: black;display: none;} 16 .right{width:50px; height:50px; position: absolute;top:175px;right: -50px;background: black;display: none;} 17 .num{width: 160px; margin: 0 auto;} 18 .num li{float: left; width: 20px;height: 20px;border-radius: 10px; background: gray;list-style: none;margin: 10px;} 19 .active{background:red !important;} 20 21 </style> 22 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> 23 24 25 </head> 26 <body> 27 <div class="flexslider"> 28 <div class="slider"> 29 <ul > 30 <li><img src="图片" /></li> 31 <li><img src="图片" /></li> 32 <li><img src="图片" /></li> 33 <li><img src="图片" /></li> 34 </ul> 35 <div class="left"></div> 36 <div class="right"></div> 37 </div> 38 39 <ul class="num"> 40 <li class="active"></li> 41 <li></li> 42 <li></li> 43 <li></li> 44 </ul> 45 </div> 46 47 48 <script> 49 $(function() { 50 var count=$('.slider li').length; 51 var index=0; 52 var timer; 53 54 //全部轮播定时器 55 function setTimer(){ 56 timer=setInterval(function(){ 57 index++; 58 $(".slider li").eq(index%count).show().siblings('li').hide(); 59 $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active'); 60 61 },1000) 62 }; 63 //定时器运行 64 setTimer(); 65 66 //移入移除轮播开关定时器 67 $(".slider").mouseover(function(event) { 68 clearInterval(timer); 69 70 }).mouseout(function(event) { 71 72 setTimer(); 73 }); 74 //移入顶部圆点显示对应图片 75 $(".num li").mouseover(function(event) { 76 clearInterval(timer); 77 index = $(this).index('.num li'); 78 $(this).addClass('active').siblings('li').removeClass('active'); 79 $(".slider li").eq(index).show().siblings('li').hide(); 80 }).mouseout(function(event) { 81 setTimer(); 82 }); 83 84 //左右按钮进入进出隐藏显示 85 $(".slider").mouseover(function(event) { 86 clearInterval(timer); 87 $(".left").show(); 88 $(".right").show(); 89 }).mouseout(function(event) { 90 $(".left").hide(); 91 $(".right").hide(); 92 93 }); 94 95 96 97 //左右按钮轮播 98 $(".left").click(function(event) { 99 index--; 100 $(".slider li").eq(index%count).show().siblings('li').hide(); 101 $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active'); 102 }); 103 104 $(".right").click(function(event) { 105 index++; 106 $(".slider li").eq(index%count).show().siblings('li').hide(); 107 $(".num li").eq(index%count).addClass('active').siblings('li').removeClass('active'); 108 }); 109 })简易轮播写法 110 111 </script> 112 113 114 </script> 115 116 </body> 117 </html>