焦点轮播图效果<br> *{<br> margin: 0;<br> padding: 0;<br> list-style-type: none;<br> }<br> .wrap{<br> width:490px;<br> height: 170px;<br> margin: 100px auto;<br> overflow: hidden;<br> position: relative; <br> }<br> .wrap ul{<br> position: absolute;<br> }<br> .wrap li{<br> height: 170px;<br> }<br> .list{<br> position: absolute;<br> right: 10px;<br> bottom: 10px;<br> }<br> .list li{<br> float: left;<br> width: 20px;<br> height: 20px;<br> background-color: #ccc;<br> border: 1px solid #666;<br> margin-left: 5px;<br> color: #000;<br> text-align: center;<br> line-height: 20px;<br> cursor: pointer;<br> }<br> .list li.on{<br> background-color: #E57000;<br> color: #fff;<br> }<br> 1 2 3 4 5 <br> <br> window.onload=function () {<br> // 元素,申明變數## 'wrap'),<br> pic=document.getElementById('pic'),<br> list ,<br> that=this,<br> timer=null;<br><br> index++;<br> if (index>=list.length) {<br> index=0;<br> }<br> timer=setInterval(autoPlay,2000);<br> //滑鼠滑過整個容器時停止切換（計時器） <br> wrap.onmouseover=function(){<br> clearInterval(timer)<br> wrap.onmouseout=function(){<br> timer=setInterval (autoPlay,2000);<br> }<br><br> //遍歷所有數位導航，實現滑過切換至對應得圖片<br> ++ for (var ); {<br> list[j].id=j;<br> list[j].onmouse clearInterval(timer); ## }<br><br> <br> function qiehuan(num){<br> list[i].className="" ;<br> }<br> list[num].className="on";<br> num=index;<br># }<br> } <br>
