实现目的：进入网页自动轮播，悬浮停止，左右按钮可翻看图片，底下序号可翻看图片。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul li{ 12 list-style: none; 13 } 14 .outer{ 15 590px; 16 height: 470px; 17 border:dashed cadetblue 5px; 18 margin: 0 auto; 19 position: relative; 20 } 21 .outer .num{ 22 position: absolute; 23 left: 0; 24 /*top: 0;*/ 25 bottom: 10px; 26 font-size: 0; 27 text-align: center; 28 100%; 29 30 } 31 .outer .num li{ 32 height: 20px; 33 20px; 34 background-color:darkgray ; 35 border-radius: 60%; 36 text-align: center; 37 line-height: 20px; 38 display: inline-block; 39 font-size: 16px; 40 margin: 5px; 41 cursor: pointer; 42 } 43 .outer .img li{ 44 position: absolute; 45 left: 0; 46 top: 0; 47 48 } 49 .button{ 50 height: 60px; 51 40px; 52 background-color: gray; 53 position: absolute; 54 /*left: 0px;*/ 55 top: 50%; 56 margin-top: -30px; 57 opacity: 0.6; 58 font-size: 40px; 59 font-weight: bolder; 60 text-align: center; 61 display: none; 62 } 63 .btn_right{ 64 right: 0; 65 } 66 .outer:hover .button{ 67 display: block; 68 } 69 .outer .num li.current{ 70 background-color: red; 71 } 72 </style> 73 </head> 74 <body> 75 <div class="outer"> 76 <ul class="img"> 77 <li><img src="image/1.jpg"></li> 78 <li><img src="image/2.jpg"></li> 79 <li><img src="image/3.jpg"></li> 80 <li><img src="image/4.jpg"></li> 81 <li><img src="image/5.jpg"></li> 82 </ul> 83 <ul class="num"> 84 <li>1</li> 85 <li>2</li> 86 <li>3</li> 87 <li>4</li> 88 <li>5</li> 89 </ul> 90 <div class="btn_left button"> < </div> 91 <div class="btn_right button"> > </div> 92 </div> 93 <script src="jquery-1.8.2.js"></script> 94 <script> 95 $(function () { 96 $('.num li').first().addClass('current'); 97 $('.num li').mouseover(function () { 98 $(this).addClass('current').siblings().removeClass('current'); 99 var index = $(this).index(); 100 i = index; 101 $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000); 102 }); 103 104 var i = 0; 105 function move() { 106 i++; 107 if(i==5){ 108 i=0; 109 }; 110 $('.num li').eq(i).addClass('current').siblings().removeClass('current'); 111 $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000); 112 }; 113 var time = setInterval(move,1500); 114 115 $('.outer').hover(function () { 116 clearInterval(time); 117 },function () { 118 time = setInterval(move,1500); 119 }); 120 121 $('.btn_right').click(function () { 122 move(); 123 }); 124 $('.btn_left').click(function () { 125 if(i==0){ 126 i=5 127 }; 128 i = i - 2; 129 move(); 130 }); 131 }) 132 </script> 133 </body> 134 </html>