这个轮播图代码是从网上找来的，专门找了个写法简单的，只是作为一个小练习，大概原理如下：
1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放，离开自动播放5.移动到导航上停止播放，离开自动播放6.移动到导航上，切换相对应的导航
然后贴代码：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style> *{margin:0; padding:0; list-style:none;} .wrap{height:170px; width:490px; margin:60px auto; overflow: hidden; position: relative; margin:100px auto;} .wrap ul{position:absolute;} .wrap ul li{height:170px;} .wrap ol{position:absolute; right:5px; bottom:10px;} .wrap ol li{height:20px; width: 20px; background:#ccc; border:solid 1px #666; margin-left:5px; color:#000; float:left; line-height:center; text-align:center; cursor:pointer;} .wrap ol .on{background:#E97305; color:#fff;}
</style> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic').getElementsByTagName("li"), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null;
// 定义并调用自动播放函数 timer = setInterval(autoPlay, 2000); // 鼠标划过整个容器时停止自动播放 wrap.onmouSEOver = function () { clearInterval(timer); }
// 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout = function () { timer = setInterval(autoPlay, 2000); } // 遍历所有数字导航实现划过切换至对应的图片 for (var i = 0; i < list.length; i++) { list[i].onmouseover = function () { clearInterval(timer); index = this.innerText - 1; changePic(index); }; }; function autoPlay () { if (++index >= pic.length) index = 0; changePic(index); }
// 定义图片切换函数 function changePic (curIndex) { for (var i = 0; i < pic.length; ++i) { pic[i].style.display = "none"; list[i].className = ""; } pic[curIndex].style.display = "block"; list[curIndex].className = "on"; }
}; </script></head><body> <div class="wrap" id='wrap'> <ul id="pic"> <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div></body></html>
只是个人的一个小练习，希望诸位大神看了，不要黑我...
新闻热点
疑难解答
