小编给大家分享一下js怎么实现无限循环轮播图效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
从网站建设到定制行业解决方案,为提供网站制作、成都网站设计服务体系,各种行业企业客户提供网站建设解决方案,助力业务快速发展。成都创新互联将不断加快创新步伐,提供优质的建站服务。
知识要点
1.实现无限循环的原理:
以偏移的距离来判断是否跳回第一张和最后一张
也可以利用循环判断图片的当前索引值
var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px"; } if (newLeft<-3000){ list.style.left=-600+"px"; }
2.当前图片轮播的圆点变色显示:
因为每次点击index+1 所以当前的index-1就是button的索引
//添加on前先清空on for(var i=0;i3.实现动画滚动效果:
原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px
就要用到setTimeout(go,10);//10毫秒再次调用go函数,一直到不满足条件就停
var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 var time=300;//位移总时间 var interval=10;//位移间隔时间 //动画效果自定义公式: 每次位移的距离=单次偏移距离/位移次数 var speed=offset/(time/interval); //递归函数 直到不满足条件(跳到辅助图) //递归就是把600偏移量分为多次完成偏移 function go(){ //speed<0 并且 当前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移 if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)-600){ list.style.left=-3000+"px"; } if (newLeft<-3000){ list.style.left=-600+"px"; } } } 4.点击圆点按钮执行动画:
原理获取当前的按钮位置再获取要点击的按钮的位置
用(点击的——当前的)*-600=需要跳转的正负距离(向左或向右)
for(var i=0;i5.自动播放:
给外层容器加个onmouseover事件再调用setInterval方法
//给方法定义全局变量是因为停止的时候要使用 function play(){ timer=setInterval(function(){ next.onclick(); },3000); } clearInterval(timer)完整代码
注:图片链接本地替换一下
demo 以上是“js怎么实现无限循环轮播图效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
标题名称:js怎么实现无限循环轮播图效果
文章源于:http://cxhlcq.com/article/ghedpo.html