最简单轮播形式，1）js中通过pic的display属性控制变换2）也可通过调整Pic的margin-Left
效果如图：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 text-decoration: none; 12 } 13 .wrap{ 14 490px; 15 height: 170px; 16 margin: 100px auto; 17 border: 1px solid #000000; 18 position: relative; 19 overflow: hidden; 20 } 21 #pic{ 22 2450px; 23 height: 170px; 24 } 25 #pic li{ 26 float: left; 27 } 28 #list{ 29 position: absolute; 30 bottom: 10px; 31 left:150px ; 32 } 33 #list li{ 34 float: left; 35 15px; 36 height: 15px; 37 background: #fff; 38 margin: 0 10px; 39 border-radius: 50%; 40 cursor: pointer; 41 } 42 #list .on{ 43 background: #e27a00; 44 } 45 .Prev{ 46 top: 30px; 47 left: 0; 48 } 49 .Next{ 50 top: 30px; 51 right: 0; 52 } 53 .Prev,.Next{ 54 position: absolute; 55 font-size: 80px; 56 font-weight: bold; 57 color:#fff ; 58 -webkit-transition: all 0.35s ease-in-out 59 } 60 .Next:hover, 61 .Prev:hover{ 62 background: #ccc; 63 background: rgba(204, 204, 204, 0.4); 64 } 65 .show{ 66 display: block; 67 } 68 .hidden{ 69 display: none; 70 } 71 </style> 72 <script type="text/javascript"> 73 window.onload=function(){ 74 var pic=document.getElementById('pic').getElementsByTagName('li'); 75 var list=document.getElementById('list').getElementsByTagName('li'); 76 var prev=document.getElementById('Prev'); 77 var next=document.getElementById('Next'); 78 var index=0; 79 var timer=null; 80 81 auto(); 82 for(var i=0;i<list.length;i++){ 83 list[i].index=i; 84 list[i].onmouseover=function(){ 85 clearInterval(timer); 86 Change(this.index); 87 } 88 list[i].onmouseout=function(){ 89 auto(); 90 } 91 pic[i].onmouseover=function(){ 92 clearInterval(timer); 93 } 94 pic[i].onmouseout=function(){ 95 auto(); 96 } 97 } 98 prev.onclick=function(){ 99 clearInterval(timer); 100 index--; 101 if(index<=0){ 102 index=list.length-1; 103 } 104 Change(index); 105 } 106 next.onclick=function(){ 107 clearInterval(timer); 108 index++; 109 if(index>=list.length){ 110 index=0; 111 } 112 Change(index); 113 } 114 prev.onmousemove=function(){ 115 clearInterval(timer); 116 } 117 prev.onmouseout=function(){ 118 auto(); 119 } 120 next.onmouseover=function(){ 121 clearInterval(timer); 122 } 123 next.onmouseout=function(){ 124 auto(); 125 } 126 127 function Change(curIndex){ 128 for(var i=0;i<list.length;i++){ 129 list[i].className=""; 130 pic[i].className="hidden"; 131 } 132 list[curIndex].className="on"; 133 pic[curIndex].className="show"; 134 index=curIndex; 135 } 136 function auto(){ 137 timer=setInterval(function(){ 138 index++; 139 if(index>=list.length){ 140 index=0 141 } 142 Change(index); 143 },2000); 144 } 145 } 146 </script> 147 </head> 148 <body> 149 <div class="wrap" id="wrap"> 150 <ul id="pic"> 151 <li class="show"><a href="#"><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""/></a></li> 152 <li><a href="#"><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""/></a></li> 153 <li><a href="#"><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""/></a></li> 154 <li><a href="#"><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""/></a></li> 155 <li><a href="#"><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""/></a></li> 156 </ul> 157 <ul id="list"> 158 <li class="on"></li> 159 <li></li> 160 <li></li> 161 <li></li> 162 <li></li> 163 </ul> 164 <a href="javascript:;" class="Prev" id="Prev"><</a> 165 <a href="javascript:;" class="Next" id="Next">></a> 166 </div> 167 </body> 168 </html>
2）也可以通过控制Pic的margin-Left
1 function Change(curIndex){ 2 for(var i=0;i<list.length;i++){ 3 list[i].className=""; 4 } 5 list[curIndex].className="on"; 6 Pic.style.marginLeft=-490*curIndex+'px'; 7 index=curIndex; 8 }