我们在很多网站经常看到的轮播图,基本都有如下功能：
1.图片间隔一定时间自动切换。
2.可以点击下面的图片序号手动切换。
3.鼠标停留在图片上时停止轮播。
先上效果图：
自动轮播功能：
手动切换功能：
悬停停止功能：
完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; list-style: none; } .com { width: 750px; height: 340px; margin:0 auto; border: solid 2px red; overflow: hidden; position: relative; } .com ul{ position: absolute; } .com ul li{ /* height: 340px; */ } .com ul li img{ width: 750px; height: 340px; } .com ol{ position: absolute; right: 5px; bottom: 5px; } .com ol li{ width: 20px; height: 20px; background-color: lightgray; display: inline-block; border-radius: 50%; text-align: center; line-height: 20px; margin-left:5px; float: left; } .com ol .on{ background-color: red; color:#fff; } </style> <script type="text/javascript"> window.onload= function(){ var com = document.getElementById('com'); var pic = document.getElementById('pic').getElementsByTagName('li'); var li = document.getElementById('num').getElementsByTagName('li'); var index=0; var timer=null; timer = setInterval(autoPlay,1500); com.onmouseover = function() { clearInterval(timer); } com.onmouseout = function() { timer = setInterval(autoPlay, 1500); } for(var i=0;i<li.length;i++){ li[i].onmousemove=function(){ clearInterval(timer); index=this.innerText-1; changePic(index); } } function autoPlay(){ if(++index>=pic.length){ index=0; } changePic(index); } function changePic(liIndex){ for(var i=0;i<li.length;i++){ pic[i].style.display="none"; li[i].className=""; } pic[liIndex].style.display="block"; li[liIndex].className="on"; } } </script> <title></title> </head> <body> <div class="com" id="com"> <ul id="pic"> <!-- <li>1</li> <li>2</li> <li>3</li> <li>4</li> --> <li><img src="https://img1.youlu.net/pic/flash/202008271438183818.jpg" alt=""/></li> <li><img src="https://img1.youlu.net/pic/flash/202003130926142614.jpg" alt=""/></li> <li><img src="https://img1.youlu.net/pic/flash/202006211555305530.jpg" alt=""/></li> <li><img src="https://img1.youlu.net/pic/flash/201810161023452345.jpg" alt=""/></li> </ul> <ol id="num"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> </body> </html>
注：图片采用的为有路网宣传图片链接，仅供演示，无其它任何用途，侵权联系删除。
