图片无缝滚动代码(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+JavaScript)

  • liveinchengdu
  • liveinchengdu
  • 2010年04月16日 17:59
  • 710

JS让图片无缝滚动的实现(JS代码讲解,非直拷型内容)

为了教学需要,整理了一下JS图片无缝滚动的代码。 以前一直均是拷贝网上的经典JS滚动代码,稍为更改即成自己的了,现重新讲解下,JS是如何让图片们动起来的! 下面是网上源码,百度一大堆,多数是这个样...
  • learn_2
  • learn_2
  • 2016年11月16日 16:19
  • 1822

jQuery实现图片无缝滚动

HTML代码: CSS代码: *{ margin: 0;padding: 0; ...
  • qq_35051603
  • qq_35051603
  • 2017年12月26日 10:26
  • 59

jquery实例-多张图片无缝滚动实现

:http://blog.zxtms.net/blog/WorkPace/Jquery/jquerySider/sider.html 演示效果
  • u010109898
  • u010109898
  • 2014年08月23日 10:36
  • 5985

marquee图片无缝拼接滚动

marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动...
  • zhuyu19911016520
  • zhuyu19911016520
  • 2014年04月25日 15:47
  • 10883

jQuery实现轮播图的无缝滚动

之前在学习jQuery时,想做一个轮播图的demo,于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo,但是在演示的时候,最后一张到第一张图片切换到时候没有动...
  • u010594453
  • u010594453
  • 2015年09月02日 13:08
  • 3953

图片无缝滚动的原理和实例

无缝滚动的结构:一共两个盒子,第一个大盒子下套第二个大盒子,第二个大盒子下有4张图片,第一个大盒子宽度固定为600px,第二个大盒子宽度是400%; 原理:第一个盒子相对浮动,第二个盒子绝对浮动,让...
  • stopcpp
  • stopcpp
  • 2016年10月12日 10:55
  • 2743

网页图片无缝循环滚动html代码

图片循环滚动代码 图片无缝滚动代码 先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆...
  • baolibin528
  • baolibin528
  • 2014年08月18日 00:03
  • 2396

html中图片无缝滚动代码及学习体会

我的第一篇博文 最近在学习HTML标记语言和JAVASCRIPT,HTML与CSS还好上手,JS已经有点难度啦,因为JS对大小写很敏感,一不小心就会错或者不出效果,下面我就把最近学习的一些小经验和心...
  • u014687186
  • u014687186
  • 2014年04月13日 12:07
  • 1466

bootstrap响应式兼容PC和移动端图片无缝滚动效果demo

效果如图所示: js代码部分:/** * Created by Administrator on 2017/9/15. */(function(){ var firstDom = $("...
  • CodingNoob
  • CodingNoob
  • 2017年09月15日 17:46
  • 924
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片无缝滚动代码(DIV+CSS+JavaScript)
举报原因:
原因补充:

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