百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 二款图片无缝滚动代码
分享文章到:

二款图片无缝滚动代码

发布时间:01/15 来源: 浏览: 关键词:

<!--图片滚动代码开始-->
<div id=demo style="background: #ffffff; overflow: hidden; width: 551px; color: #ffffff; height: 138px">
        <table cellpadding=0 align=center border=0 cellspace="0">
          <tr>
            <td id=demo1 valign=top>
         <img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片"><img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片"><img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片"><img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片">&nbsp;
</td> 
            <td id=demo2 valign=top></td>
                      </tr>
        </table>
<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.onmouseo教程ver=function() {clearinterval(mymar)}
             demo.onmouseout=function() {mymar=setinterval(marquee,speed)}
             </script>
</div>
        <!--图片滚动代码结束-->

备注:更改滚动方式,请修改相应未知的代码倒数第8行
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        demo.scrollleft++    向左滚动
        demo.scrollleft--    向右滚动
        demo.scrolltop++     向上滚动
        demo.scrolltop--     向下滚动

备注:更改滚动方式,请修改相应未知的代码倒数第8行
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        demo.scrollleft++    向左滚动
        demo.scrollleft--    向右滚动
        demo.scrolltop++     向上滚动
        demo.scrolltop--     向下滚动

代码二

 

<html>
<head> </head>
<body>
</p>
<div id=demo style=overflow:hidden;height:300;width:150>
 <div id=demo1>
  <img src='roll/1.png'><br>
  <img src='roll/2.png'><br>
  <img src='roll/3.png'><br>
  <img src='roll/4.png'><br>
  <img src='roll/5.png'><br>
  <img src='roll/6.png'><br>
  <img src='roll/7.png'><br>
  <img src='roll/8.png'><br>
  <img src='roll/3.png'><br>
  <img src='roll/4.png'><br>
  <img src='roll/5.png'><br>
  <img src='roll/6.png'><br>
  <img src='roll/7.png'><br>
  <img src='roll/8.png'><br>
  <img src='roll/2.png'><br>
 </div>
 <div id=demo2></div>
</div>
<p>
  <script>
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>
</p>
</body>
</html>
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有5人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板