焦点轮播图效果<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> //获取元素,申明变量<br> var wrap=document.getElementById('wrap'),<br> pic=document.getElementById('pic'),<br> list=document.getElementById('list').getElementsByTagName('li');<br> var index=0,<br> that=this,<br> timer=null;<br><br> //绑定<br> function autoPlay(){<br> index++;<br> if (index>=list.length) {<br> index=0;<br> }<br> qiehuan(index);<br> }<br> timer=setInterval(autoPlay,2000);<br> //鼠标滑过整个容器时停止切换（定时器）<br> wrap.onmouseover=function(){<br> clearInterval(timer)<br> }<br> //鼠标离开时，继续切换<br> wrap.onmouseout=function(){<br> timer=setInterval(autoPlay,2000);<br> }<br><br> //遍历所有数字导航，实现滑过切换至对应得图片<br> for (var j = 0; j < list.length; j++) {<br/> list[j].id=j;<br/> list[j].onmouseover=function(){<br/> qiehuan(this.id);<br/> clearInterval(timer); <br/> }<br/> }<br/><br/> <br/> function qiehuan(num){<br/> for (var i = 0; i < list.length; i++) {<br/> list[i].className="";<br/> }<br/> list[num].className="on";<br/> pic.style.top="-"+num*170+"px";<br/> num=index;<br/> }<br/> } <br/>
