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

JavaScript018

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