js控制图片滚动

<!--滚动图片-->

<div class="gundongtupian" style="width:945px; height:193px; border:1px solid #000;  margin:auto; margin-top:10px;">
  <TABLE style="MARGIN-TOP:5PX;" cellSpacing=0 cellPadding=0 width=940 align=center border=0> 
  <TBODY> 
  <TR>
    <TD> 
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 930px; COLOR: #ffffff; margin-left:5px;"> 
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> 
        <TBODY> 
        <TR> 
          <TD id=demo1 vAlign=top><table height="116"  border="0" cellpadding="0" cellspacing="0"> 
            <tr> 
           <td ><div align="center"><a href="http://www.lesohome.com/archive.php?aid=21345" class="font5"  target="_blank"><img src="userfiles/image/20120731/3109325585131f78664044.jpg#502#333" width="230" height="154" alt="" /></a><a href="http://www.lesohome.com/archive.php?aid=21345" class="font5"  target="_blank">碧桂园火爆热销冰爽嘉年华燃夏</a></div></td>   
		   <td ><div align="center"><a href="http://www.lesohome.com/archive.php?aid=21343" class="font5"  target="_blank"><img src="userfiles/image/20120728/2821391038ca6d38e38717.jpg#580#386" width="230" height="154" alt="" /></a><a href="http://www.lesohome.com/archive.php?aid=21343" class="font5"  target="_blank">乐搜房产网碧桂园7月28日看房</a></div></td>
		   <td ><div align="center"><a href="http://www.lesohome.com/archive.php?aid=21215" class="font5"  target="_blank"><img src="userfiles/image/20120722/221745576e426c26cb1466.jpg#716#438" width="230" height="154" alt="" /></a><a href="http://www.lesohome.com/archive.php?aid=21215" class="font5"  target="_blank">蟠龙山水豪庭7月22日团购人气</a></div></td>
		   <td ><div align="center"><a href="http://www.lesohome.com/archive.php?aid=20246" class="font5"  target="_blank"><img src="userfiles/image/20120604/04115104885d1666b53924.jpg#548#411" width="230" height="154" alt="" /></a><a href="http://www.lesohome.com/archive.php?aid=20246" class="font5"  target="_blank">云浮首次看房团1 乐搜碧桂园看</a></div></td>
		    <!-- 
		   <td ><div align="center"><a href="http://www.lesohome.com/archive.php?aid=20246" class="font5"  target="_blank"><img src="userfiles/image/20120604/04115104885d1666b53924.jpg#548#411" width="230" height="154" alt="" /></a><a href="http://www.lesohome.com/archive.php?aid=20246" class="font5"  target="_blank">云浮首次看房团2 乐搜碧桂园看</a></div></td>
			-->
            </tr> 
          </table></TD> 
          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV> 
    </TD></TR></TBODY></TABLE>

<SCRIPT> 
var speed3=35//速度数值越大速度越慢 
var t=false; 
var id="aa"; 
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML ;
function Marquee(){ 
var value = document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft;
var v = document.getElementById("demo").offsetWidth-document.getElementById("demo2").offsetWidth;
if(value<=v||value<=0) {
	document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth ;
}
else{ 
	document.getElementById("demo").scrollLeft++ ;
} 
t=false; 
} 

function RMarquee(){  
if(document.getElementById("demo").scrollLeft<=0) 
  document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth 
  else{ 
  document.getElementById("demo").scrollLeft-- 
  } 
  t=true; 
} 
var MyMar=setInterval(Marquee,speed3) 
document.getElementById("demo").οnmοuseοver=function() {clearInterval(MyMar)} 
document.getElementById("demo").οnmοuseοut=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}} 
document.getElementById('mcc').οnmοuseοut=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);} 
document.getElementById('aa').οnmοuseοut=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);} 
</SCRIPT> 


</div>

</div>


value<=v||value<=0若图片数量不足以覆盖div宽度时,value<=v起作用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值