js特效里图片怎么不会滚动

JavaScript011

js特效里图片怎么不会滚动,第1张

js特效里图片不会滚动的原因是没有使用js里的定时器。根据查询相关资料信息，js特效里让图片无缝滚动就是要让图片集在一定时间里自动切换，需要js里的定时器来控制时间，没有使用定时器功能就无法实现图片滚动。js指JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

以垂直滚动为例：一组图片

控制它的滚动条进行滚动

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

还有就是用原生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，加上过渡就是轮播了，当然直接跳的那一下把过渡关了才是无缝轮播。