需自己导入图片和jquery.js插件,图片宽度为1038px,个数为6个，如要更改需改动js代码块的变量值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>js轮播特效</title> 5 <style type="text/css"> 6 *{ 7 margin: 0; 8 padding: 0; 9 list-style: none; 10 } 11 img{ 12 1038px; 13 height: 583px; 14 } 15 #box{ 16 1038px; 17 height: 585px; 18 margin: 100px auto; 19 overflow: hidden; 20 border: 1px solid #000; 21 position: relative; 22 } 23 #box .menu{ 24 600%; 25 position: absolute; 26 left: 0; 27 bottom: 0; 28 } 29 #box .menu ul li{ 30 float: left; 31 } 32 #box .pave-ul{ 33 180px; 34 height: 20px; 35 position: absolute; 36 bottom: 15px; 37 38 left: 275px; 39 } 40 #box .pave-ul ul{ 41 position: absolute; 42 } 43 #box .pave-ul ul li{ 44 20px; 45 height: 20px; 46 border: 1px solid silver; 47 float: left; 48 margin: 0 2px; 49 cursor: pointer; 50 border-radius: 50%; 51 background-color: #ccc; 52 opacity: 0.5 53 } 54 #box .pave-ul ul li:hover{ 55 background-color: #888; 56 opacity: 1; 57 } 58 #box .pave-ul ul li.act{ 59 background-color: #888; 60 opacity: 1; 61 } 62 63 </style> 64 <meta charset="utf-8"> 65 </head> 66 <body> 67 <div id="box"> 68 <div class="menu"> 69 <ul> 70 <li><img src="1.jpg"></li> 71 <li><img src="2.jpg"></li> 72 <li><img src="3.jpg"></li> 73 <li><img src="4.jpg"></li> 74 <li><img src="6.jpg"></li> 75 <li><img src="8.jpg"></li> 76 </ul> 77 </div> 78 79 <div class="pave-ul"> 80 <ul> 81 <li class="act"></li> 82 <li></li> 83 <li></li> 84 <li></li> 85 <li></li> 86 <li></li> 87 </ul> 88 </div> 89 </div> 90 </body> 91 <script src="jquery.js"></script> 92 <script type="text/javascript"> 93 $(function(){ 94 var _index = 0;//定义图片下标 95 var window_width = 1038;//定义轮播图片的宽度 96 var timer = null;//定义定时器 97 var images_count = 6; //定义图片总数 98 99 function nextPlay(){ 100 if(_index > images_count-1){ 101 _index = 0; 102 $('#box .menu').stop().animate({left:-window_width*_index},500); 103 104 }else{ 105 $('#box .menu').stop().animate({left:-window_width*_index},500); 106 } 107 if(_index > images_count-1){ 108 _index = 0; 109 $('#box .pave-ul ul li').eq(0).addClass('act').siblings().removeClass('act');; 110 111 }else{ 112 $('#box .pave-ul ul li').eq(_index).addClass('act').siblings().removeClass('act'); 113 114 } 115 _index++; 116 } 117 timer = setInterval(nextPlay,2000); 118 119 }); 120 </script> 121 </html>