js实现左右点击按钮，图片横向循环移动，一次移动一张

JavaScript012

js实现左右点击按钮，图片横向循环移动，一次移动一张,第1张

给个思路吧,设装着所有图片的层为boxa,

它的父层为boxb,

点击移动的时候你把boxa向左移一张图片的宽度就是了,也就是点击的时候更改boxa的margin-left为负数,

boxb要设置over-flow为hidden

,

boxa要足够长

<div id=demo style="width:800pxoverflow:hidden">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td id=demo1>

<table width="100%" border="0" cellspacing="0" cellpadding="5">

<tr>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

</tr>

</table>

</td>

<td id=demo2></td>

</tr>

</table>

</div>

<script>

var speed=20

document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML

function Marquee(){

if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)

document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth

else{

document.getElementById("demo").scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}

document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

id为demo的div 宽度是在版面上要显示出的宽度，这个是必须定义的，还有overflow:hidden这个也是必须的

内容放在demo1的td里面

你放进去滚动的内容宽度必须大于demo的宽度才能滚动，当然这个宽度随你自己定

理论上是可以放无限宽的数据

鼠标悬停就停止滚动，离开继续滚动