js中怎么实现图片不间断的向左滚动效果,要那种代码清晰的~

JavaScript014

js中怎么实现图片不间断的向左滚动效果,要那种代码清晰的~,第1张

<script type="text/javascript">

var speed = 20//滚动速度

var maq

var m1//第一份滚动的内容

var m2//第二份滚动的内容

var timer//定时器

function run(){

if(m1.offsetWidth<=maq.scrollLeft){

maq.scrollLeft-=m1.offsetWidth

}else{

maq.scrollLeft+=6

}

}

window.onload=function(){

maq=document.getElementById("maq")

m1=document.getElementById("m1")

m2=document.getElementById("m2")

m2.innerHTML=m1.innerHTML

if(timer==null){

timer=window.setInterval(run,speed)

}

maq.onmouseover=function(){

window.clearInterval(timer)

}

maq.onmouseout=function(){

timer=window.setInterval(run,speed)

}

}

</script>

</head>

<body>

<div id="maq" style="height:200pxwidth:180pxoverflow:hidden">

<table>

<tr>

<td id="m1">

<table>

<tr>

<td><img src="file:///E|/Images/player1.png" width="174" height="268" /></td>

<td><img src="file:///E|/Images/player2.png" width="174" height="268" /></td>

<td><img src="file:///E|/Images/player3.png" width="174" height="268" /></td>

</tr>

</table>

</td>

<td id="m2"></td>

</tr>

</table>

</div>

</body>

楼主详细代码在这里这已经是相当的简介版了你只要把图片路径改一下就能用了,~要采纳呦~你懂得~~

没有你的DOM结构,很难理解代码的意思!我给你说一下原理,如果你不懂可以贴出代码和视图,或者DOM结构出来!无限滚动的原理是需要复制一份需要滚动的内容,然后首尾排列起来!

看你没滚动一次就减去一个固定的宽度,这应该没有问题,但是我估计就是在判断到tab2.offsetWidth-tab.scrollLeft >0的情况下出问题了!tab.scrollLeft++ 每次只能加1,应该是这里的问题!要当他《=0时,设置为0或者初始值才能看不出是动态设置的!不知道能不能帮你!但是没有效果很难理解你的意思!