网络建站知识

精准传达 • 价值共享

洞悉互联网前沿资讯，探寻网站营销规律

网站建设 > 网站建设 > 网络建站知识

查看其它板块

Html js轻松实现 向上下左右循环滚动代码

作者：Smileby陌少羽 | 2019-05-06 09:29 |点击：

Html js轻松实现 向上下左右循环滚动代码 代码如下



  1. <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)</title>
    </head>
    <body>
    <div id="colee" style="overflow:hidden;height:253px;width:410px;">
    <div id="colee1">
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    </div>
    <div id="colee2"></div>
    </div>
    <script>
    var speed=30;
    var colee2=document.getElementById("colee2");
    var colee1=document.getElementById("colee1");
    var colee=document.getElementById("colee");
    colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
    function Marquee1(){
    //当滚动至colee1与colee2交界时
    /*if(colee2.offsetTop-colee.scrollTop<=0){
    colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
    }else{
    colee.scrollTop++
    }*/
    //无限循环
    if(colee.scrollTop>=colee1.offsetHeight){
    colee.scrollTop=0;
    }
    else
    {
    colee.scrollTop++;
    }
    }
    var MyMar1=setInterval(Marquee1,speed)//设置定时器
    //鼠标移上时清除定时器达到滚动停止的目的
    colee.onmouseover=function() {clearInterval(MyMar1)}
    //鼠标移开时重设定时器
    colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
    </script>
    <!--向上滚动代码结束-->
    <br>
    <!--下面是向下滚动代码-->
    <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
    <div id="colee_bottom1">
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    <p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p>
    </div>
    <div id="colee_bottom2"></div>
    </div>
    <script>
    var speed=30
    var colee_bottom2=document.getElementById("colee_bottom2");
    var colee_bottom1=document.getElementById("colee_bottom1");
    var colee_bottom=document.getElementById("colee_bottom");
    colee_bottom2.innerHTML=colee_bottom1.innerHTML
    colee_bottom.scrollTop=colee_bottom.scrollHeight
    function Marquee2(){
    if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
    colee_bottom.scrollTop+=colee_bottom2.offsetHeight
    else{
    colee_bottom.scrollTop--
    }
    }
    var MyMar2=setInterval(Marquee2,speed)
    colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
    colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
    </script>
    <!--向下滚动代码结束-->
    <br>
    <!--下面是向左滚动代码-->
    <div id="colee_left" style="overflow:hidden;width:500px;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="colee_left1" valign="top" align="center">
    <table cellpadding="2" cellspacing="0" border="0">
    <tr align="center">
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    </tr>
    </table>
    </td>
    <td id="colee_left2" valign="top"></td>
    </tr>
    </table>
    </div>
    <script>
    //使用div时，请保证colee_left2与colee_left1是在同一行上.
    var speed=30//速度数值越大速度越慢
    var colee_left2=document.getElementById("colee_left2");
    var colee_left1=document.getElementById("colee_left1");
    var colee_left=document.getElementById("colee_left");
    colee_left2.innerHTML=colee_left1.innerHTML
    function Marquee3(){
    if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
    colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
    else{
    colee_left.scrollLeft++
    }
    }
    var MyMar3=setInterval(Marquee3,speed)
    colee_left.onmouseover=function() {clearInterval(MyMar3)}
    colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
    </script>
    <!--向左滚动代码结束-->
    <br>
    <!--下面是向右滚动代码-->
    <div id="colee_right" style="overflow:hidden;width:500px;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="colee_right1" valign="top" align="center">
    <table cellpadding="2" cellspacing="0" border="0">
    <tr align="center">
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    <td><p><img src="http://www.hulingweb.cn/templets/hlwl/images/icon-logo.jpg"></p></td>
    </tr>
    </table>
    </td>
    <td id="colee_right2" valign="top"></td>
    </tr>
    </table>
    </div>
    <script>
    var speed=30//速度数值越大速度越慢
    var colee_right2=document.getElementById("colee_right2");
    var colee_right1=document.getElementById("colee_right1");
    var colee_right=document.getElementById("colee_right");
    colee_right2.innerHTML=colee_right1.innerHTML
    function Marquee4(){
    if(colee_right.scrollLeft<=0)
    colee_right.scrollLeft+=colee_right2.offsetWidth
    else{
    colee_right.scrollLeft--
    }
    }
    var MyMar4=setInterval(Marquee4,speed)
    colee_right.onmouseover=function() {clearInterval(MyMar4)}
    colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
    </script>
    <!--向右滚动代码结束-->
    </body>
    </html>
     
 


以上就是Html js轻松实现 向上下左右循环滚动代码的方法 大家可以新建一个html 看看效果就知道了
如没特殊注明，文章均为狐灵科技原创,转载请注明   "Html js轻松实现 向上下左右循环滚动代码
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

另一款好用的织梦幻灯片管理插件

下一篇———————

重庆网站建设分享一款好看的页面跳转源码
多一份免费策划方案，总有益处。

请直接添加技术总监微信联系咨询

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

联系狐灵科技，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：15082661954 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 15082661954 提交需求 官方微信 狐灵网络科技官方微信