js中无缝滚动轮播图有多少种做法?

JavaScript014

js中无缝滚动轮播图有多少种做法?,第1张

还有就是用原生js模仿jQuery写一个动画函数,最简单版的就是:

var timer = null

function ani(ele,target) {

clearInterval(ele.timer)

ele.timer = setInterval(function() {

var step = (target - ele.offsetLeft)/10

step = step>0?Math.ceil(step):Math.floor(step)

ele.style.left = ele.offsetLeft + step + "px"

console.log(1)

if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {

ele.style.left = target + "px"

clearInterval(ele.timer)

}

},30)

}

利用动画实现图片位置的移动,也是放一个图片到前面。

第二个就是还是放一张图到前面,然后把带图片的li定位;用一个arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}]这样的数组把值分别赋给li;要滚动的时候把arr的最后一项放到最前面,再依次赋值给li,加上过渡就是轮播了,当然直接跳的那一下把过渡关了才是无缝轮播。

以垂直滚动为例:一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了。你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了,而就在此刻我们将滚动条高度设置为0(因为速度很快,所以不会出现停顿感),你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加,以及滚动条距离的获取和修改。网上代码很多,都是基于这类构思