js网页轮播图制作步骤详解（前端轮播图怎么做）
js网页轮播图制作步骤详解（前端轮播图怎么做）5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器 4、当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能2、定时器函数主要是用来执行图片轮播的效果 3、当鼠标放在图片上面时，图片就停止了轮播的效果 清除了定时器方法名：window.clearInterval (timer），清除指定的定时器。
效果图
思路分析：
1、开启一个定时器
方法名：window.setInterval(code MilliSec)，每隔指定的时间就执行code，无限次执行。
2、定时器函数主要是用来执行图片轮播的效果
3、当鼠标放在图片上面时，图片就停止了轮播的效果 清除了定时器
方法名：window.clearInterval (timer），清除指定的定时器。
4、当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能
5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器
6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片
7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果 重新开启了定时器功能
8、li标签上面的高亮效果，它是随着图片滚动而滚动。
HTML代码
<body> <div id="content"> <!--轮换显示的横幅广告图片--> <div class="scroll_top"></div> <div class="scroll_mid"> <img src="https://img.aigexing.comimages/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" οnmοuseοver="stopScroll()" οnmοuseοut="goon()"/> <div id="scroll_number"> <ul> <li class="scroll_number_over" οnmοuseοver="stopScroll(1)" οnmοuseοut="goon()">1</li> <li οnmοuseοver="stopScroll(2)" οnmοuseοut="goon()">2</li> <li οnmοuseοver="stopScroll(3)" οnmοuseοut="goon()">3</li> <li οnmοuseοver="stopScroll(4)" οnmοuseοut="goon()">4</li> <li οnmοuseοver="stopScroll(5)" οnmοuseοut="goon()">5</li> <li οnmοuseοver="stopScroll(6)" οnmοuseοut="goon()">6</li> </ul> </div> </div> <div class="scroll_end"></div> </div> </body>
JS代码
<script type="text/javascript"> window.οnlοad=function(){ timer=setInterval("imgScroll()" 500); var scroll_number=document.getElementById('scroll_number'); scrLi=scroll_number.getElementsByTagName('li'); scrLiLen=scrLi.length; } var n=2; function imgScroll(){ for(var i=0;i<scrLiLen;i ){ scrLi[i].className=""; } scrLi[n-1].className="scroll_number_over"; var imgObj=document.getElementById('dd_scroll'); imgObj.src="https://img.aigexing.comimages/dd_scroll_" n ".jpg"; n ; if(n>6){ n=1; } } function stopScroll(imgN){ if(imgN){ n=imgN; imgScroll(); } clearInterval(timer); } function goon(){ timer=setInterval('imgScroll()' 500); } </script>
以上就是轮播图怎么做的详细内容，更多请关注其它相关文章！
更多技巧请《转发 关注》哦！
