图片无缝滚动代码(DIV+CSS+JavaScript)

原创 2012年03月28日 18:09:28
  1. <div id="imgbox" style="height:110px;width:600px;overflow:hidden;">  
  2.     <div id="imgbox1" style="float:left;width:1000%">  
  3.         <img src="http://www.guhongtao.com/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  4.         <img src="http://www.guhongtao.comintl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  5.         <img src="http://www.guhongtao.com/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  6.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  7.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  8.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  9.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  10.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  11.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  12.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
  13.     </div>  
  14.     <div id="imgbox2" style="float:left" mce_style="float:left"></div>  
  15. </div>  


  1. <mce:script type="text/javascript"><!--  
  2. var speed=30;  
  3. var imgbox=document.getElementById("imgbox");  
  4. var imgbox1=document.getElementById("imgbox1");  
  5. var imgbox2=document.getElementById("imgbox2");  
  6. imgbox2.innerHTML=imgbox1.innerHTML;  
  7. function Marquee(){  
  8.  if(imgbox2.offsetWidth-imgbox.scrollLeft<=0)  
  9.   imgbox.scrollLeft-=imgbox1.offsetWidth;  
  10.  else{  
  11.   imgbox.scrollLeft++;  
  12.  }  
  13. }  
  14. var MyMar=setInterval(Marquee,speed);  
  15. imgbox.onmouseover=function(){clearInterval(MyMar)}  
  16. imgbox.onmouseout=function(){MyMar=setInterval(Marquee,speed)}  
  17. // --></mce:script>  

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

div+css+js无缝滚动代码

先了解一下对象的几个的属性: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动 高度。 scrollLeft:设置或获取...

JS+DIV无缝滚动代码

JavaScript图片无缝滚动

利用javascript的setInterval()函数实现的图片无缝滚动

javascript中的setIntervar()函数无限的隔一段时间执行,利用这个原理可以实现一个图片无缝滚动的功能,当然现在网上已经有很多这方面的功能,但是自己动手来实现的还是有点不一样的,不多说...

图片无缝滚动代码

Javascript图片无缝滚动_妙味课堂

目标:使用实现Javascript实现多图的横向无缝滚动,左右ge
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)