js 无缝滚动只滚动一次

JavaScript010

js 无缝滚动只滚动一次,第1张

应该是图片高度或宽度不够，不知道你是左右滚动还是上下滚动。你多放几张图片，这个原理是必须图片加在一起的高度或宽度（看上下滚动还是左右滚动而定）必须大于div的高度或者宽度，他就能连续不断的滚动了

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<style>

.wrap{width:800pxheight:500pxmargin:200px auto 0position: relativeborder:1px solid #000overflow: hidden}

h1{position: absoluteleft:800pxword-break: keep-all}

</style>

<body>

<div class="wrap">

<h1>这是无缝滚动</h1>

<h1>这是无缝滚动</h1>

</div>

<script>

var wenzi=document.querySelectorAll("h1")

var speed1=0

var speed2=0

var flag=false

setInterval(function(){

speed1-=10

wenzi[0].style.left=800+speed1+"px"

wenzi[1].style.left=800+speed2+"px"

if(wenzi[0].offsetLeft==0){

flag=true

}

if(flag){

speed2-=10

}

if(wenzi[0].offsetLeft==0){

speed2=0

}

if(wenzi[1].offsetLeft==0){

speed1=0

}

},60)

</script>

</body>

</html>

纯手敲 觉得有用可以点个赞啊