您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“怎么用HTML和js实现轮播图”，在日常操作中，相信很多人在怎么用HTML和js实现轮播图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用HTML和js实现轮播图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
思路分析：
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="images/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="images/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>到此，关于“怎么用HTML和js实现轮播图”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。