整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
JavaScript实现无限轮播图效果（附源码）
javascript群内每日课题-今日课题：用JavaScript实现无限轮播图效果
PS:很多企业通用的案例自己再学习过程中肯定是要熟练的，所以今天做了这个无限轮播，很多人都担心自己写的代码烂，而不敢去写代码，总想着等自己等写出好的代码再来做游戏，再来练习，其实我的意见是前端新人要多些烂代码，不管你在学习中还是工作中，你不写够足量的烂代码，是无法进化到写好代码的程度，所以练习吧骚年
如果想要更多的企业求职加分项目，案例，游戏源码，可以来一下我的前端群216634437，每天都会精挑细选一个特效，项目游戏出来详细讲解，分享！
知识要点
1.实现无限循环的原理：
以偏移的距离来判断是否跳回第一张和最后一张
也可以利用循环判断图片的当前索引值
2.当前图片轮播的圆点变色显示：
因为每次点击index+1 所以当前的index-1就是button的索引
3.实现动画滚动效果：
原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px
就要用到setTimeout(go,10);//10毫秒再次调用go函数，一直到不满足条件就停
4.点击圆点按钮执行动画：
原理获取当前的按钮位置再获取要点击的按钮的位置
用（点击的——当前的）*-600=需要跳转的正负距离（向左或向右）
5.自动播放：
给外层容器加个onmouseover事件再调用setInterval方法
想要练习这个案例的进群领取源码：216634437（代码已经上传到群文件，自助下载练习）
头条号里有许多web前端学习视频，企业常用特效/案例/项目，敬请关注！
如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频
果图
思路分析：
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>
以上就是轮播图怎么做的详细内容，更多请关注其它相关文章！
更多技巧请《转发 + 关注》哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
