图片无缝滚动代码(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实现图片<ul><li></li></ul>无缝滚动代码

(含上下左右滚动代码)
  • lzl8609
  • lzl8609
  • 2015年05月05日 09:00
  • 1096

javascript+div图片无缝滚动

  • 2009年05月15日 21:04
  • 5KB
  • 下载

div+css+js无缝滚动代码

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

JS+DIV无缝滚动代码

  • 2011年11月03日 12:10
  • 3KB
  • 下载

JavaScript图片无缝滚动

  • 2011年06月28日 11:00
  • 2KB
  • 下载

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

目标:使用实现Javascript实现多图的横向无缝滚动,左右ge

图片无缝滚动代码

  • 2012年03月02日 03:50
  • 4KB
  • 下载

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

javascript中的setIntervar()函数无限的隔一段时间执行,利用这个原理可以实现一个图片无缝滚动的功能,当然现在网上已经有很多这方面的功能,但是自己动手来实现的还是有点不一样的,不多说...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片无缝滚动代码(DIV+CSS+JavaScript)
举报原因:
原因补充:

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