图片滚动js 实现图片无缝滚动

在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下

    

  • 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的适用。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>图片滚动</title>

    </head>

    <body>

    <style type="text/css">

    <!--

    #demo {

    background: #FFF;

    overflow:hidden;

    border: 1px dashed #CCC;

     500px;

    }

    #demo img {

    border: 3px solid #F2F2F2;

    }

    #indemo {

    float: left;

     800%;

    }

    #demo1 {

    float: left;

    }

    #demo2 {

    float: left;

    }

    -->

    </style>

    <div id="demo">

    <div id="indemo">

    <div id="demo1">

    <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>

    <a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>

    每日一道理
虽然你现在还只是一株稚嫩的幼苗。然而只要坚韧不拔,终会成为参天大树;虽然你现在只是涓涓细流,然而只要锲而不舍,终会拥抱大海;虽然你现在只是一只雏鹰,然而只要心存高远,跌几个跟头之后,终会占有蓝天。

    <a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>

    <a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>

    <a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>

    <a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>

    </div>

    <div id="demo2"></div>

    </div>

    </div>

    <script>

    <!--

    var speed=10;

    var tab=document.getElementById("demo");

    var tab1=document.getElementById("demo1");

    var tab2=document.getElementById("demo2");

    tab2.innerHTML=tab1.innerHTML;

    function Marquee(){

    if(tab2.offsetWidth-tab.scrollLeft<=0)

    tab.scrollLeft-=tab1.offsetWidth

    else{

    tab.scrollLeft++;

    }

    }

    var MyMar=setInterval(Marquee,speed);

    tab.onmouseover=function() {clearInterval(MyMar)};

    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

    -->

    </script>

    </body>

    </html>

文章结束给大家分享下程序员的一些笑话语录: 看到有人回帖“不顶不是中国人”,他的本意是想让帖子沉了。

--------------------------------- 原创文章 By
图片和滚动
---------------------------------

原文地址:https://www.cnblogs.com/xinyuyuanm/p/3150350.html