• 注册
热门标签
↑ 收起导航

图片无缝循环滚动代码

很明显大多数网页设计者知道Marquee这个标签,但是它的不足也是显而易见的,就是刚打开网页的时候会显示一片空白然后才慢慢显示marquee标签里面内容,而最好的效果是刚打开页面就会看到内容的滚动。

但我在用这代码的时候遇到些问题,加到原有网页后会和原有的代码冲突,造成没有达到预期的效果,我没再深入研究是哪部分代码有冲突,最后利用iframe临时解决了。

下面分别收藏的是上下左右四种方向的代码,想用什么就Copy什么吧,给个演示:

<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img
src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img
src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向上: 

<div id=demo style="overflow:hidden; width:128px; height:300px;">  <div id=demo1>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://www.baidu.com/img/baidu_sylogo1.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  </div>  <div id=demo2></div>  </div>  <script language="javascript">  var speed=30  demo2.innerHTML=demo1.innerHTML  function Marquee(){  if(demo2.offsetTop-demo.scrollTop<=0)  demo.scrollTop-=demo1.offsetHeight  else{  demo.scrollTop++  }  }  var MyMar=setInterval(Marquee,speed)  demo.onmouseover=function() {clearInterval(MyMar)}  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  </script>

向下:

<div id=demo style="overflow:hidden; width:128px; height:300px;">  <div id=demo1>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  <img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><br>  </div>  <div id=demo2></div>  </div>  <script language="javascript">  var speed=30  demo2.innerHTML=demo1.innerHTML  demo.scrollTop=demo.scrollHeight  function Marquee(){  if(demo1.offsetTop-demo.scrollTop>=0)  demo.scrollTop+=demo2.offsetHeight  else{  demo.scrollTop--  }  }  var MyMar=setInterval(Marquee,speed)  demo.onmouseover=function() {clearInterval(MyMar)}  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  </script>

向左: 

<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left  cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img  src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img  src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"></td><td id=demo2 valign=top></td></tr></table></div>  <script>  var speed=30  demo2.innerHTML=demo1.innerHTML  function Marquee(){  if(demo2.offsetWidth-demo.scrollLeft<=0)  demo.scrollLeft-=demo1.offsetWidth  else{  demo.scrollLeft++  }  }  var MyMar=setInterval(Marquee,speed)  demo.onmouseover=function() {clearInterval(MyMar)}  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  </script>

向右:

<div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left 
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img 
src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"><img 
src="http://yangjunwei.com/s/s/images/nuodou_logo.gif"></td><td id=demo2 valign=top></td&gt
;</tr></table></div>

<script> 
var speed=30 
demo2.innerHTML=demo1.innerHTML 
demo.scrollLeft=demo.scrollWidth 
function Marquee(){ 
if(demo.scrollLeft<=0) 
demo.scrollLeft+=demo2.offsetWidth 
else{ 
demo.scrollLeft-- 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/216.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册