原生JS如何实现简单的无缝自动轮播效果
这篇文章将为大家详细讲解有关原生JS如何实现简单的无缝自动轮播效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司致力于成都网站建设、网站建设,成都网站设计,集团网站建设等服务标准化,推过标准化降低中小企业的建站的成本,并持续提升建站的定制化服务水平进行质量交付,让企业网站从市场竞争中脱颖而出。 选择创新互联公司,就选择了安全、稳定、美观的网站建设服务!
万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。
首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧
图片轮播的话我是让整个ul移动显示,而不是更改li的margin,上css代码,因为一张图片设置是80px;所以容器的width就是400了。
#wrap{ width: 400px; height: 80px; overflow: hidden; margin-left: 500px; margin-top: 300px; position: relative; } #ul{ position: absolute; left: 0; top: 0; width: 400px; font-size: 0; margin: 0; padding: 0; }
然后js代码就很简单了,直接设置一个定时器,让ul缓慢的右移或者左移就可以了。但是会有一个问题,我们等下再讨论,先附上代码
window.onload = function(){ var odiv = document.getElementById('wrap'); var oul = document.getElementById('ul'); setInterval(function(){ oul.style.left = oul.offsetLeft + 5 +'px'; },30)
但是图片往右走了就回不了头了,上面的代码只是让图片一直往左移动,那怎么实现当最后一张图片移动到左边缘时第一张图片重新显示,其实很简单
比如图片是1、2、3、4这么显示,那么我们多一份图片不就可以了,也就是说1、2、3、4、1、2、3、4,然后当第2组图片显示到4的时候,我们将ul重新拉回来
那么代码就可以这么写了
var odiv = document.getElementById('wrap'); var oul = document.getElementById('ul'); var oli = oul.getElementsByTagName('li'); oul.innerHTML = oul.innerHTML + oul.innerHTML;//拼接li,因为图片可能是任意张 oul.style.width = oli[1].offsetWidth * oli.length + 'px';//ul的宽度等于所有图片宽度的总和 setInterval(function(){ if (oul.offsetLeft < -oul.offsetWidth/2) { oul.style.left = 0;//如果ul已经显示完了一组,也就是宽度的一半,那么就把他拉回来重新轮播 }else{ oul.style.left = oul.offsetLeft - 2 +'px'; } },30);
这样就完成了,可以复制代码在浏览器查看效果。
关于“原生JS如何实现简单的无缝自动轮播效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
文章标题:原生JS如何实现简单的无缝自动轮播效果
转载来于:http://myzitong.com/article/jcishj.html