知道科技

全部频道

您的当前位置：首页div+css布局的图片连续滚动js实现代码_javascript技巧

div+css布局的图片连续滚动js实现代码_javascript技巧

来源：知道科技
 html布局代码
代码如下:




无标题文档






——结构必须的——-->











































    • -->

    toleft("demo","demo1","demo2",30,"onedemo");
    //toright("demo0","demo11","demo22",20,"ti2");




    js核心代码
    代码如下:
    //调用向左滚动
    //toleft("demo","demo1","demo2",30,"ti1")
    //调用向右滚动
    //toright("demo0","demo11","demo22",20,"ti2")

    function $(id)
    {
    return document.getElementById(id)
    }

    //向左滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。
    function toleft(demo,demo1,demo2,speed,flag)
    {
    demo=$(demo);
    demo1=$(demo1);
    demo2=$(demo2)
    demo2.innerHTML=demo1.innerHTML
    function Marquee()
    {
    if(demo2.offsetWidth-demo.scrollLeft<=0)
    {
    demo.scrollLeft-=demo1.offsetWidth
    }
    else
    {
    demo.scrollLeft++
    }
    }
    flag=setInterval(Marquee,speed)
    demo.onmouseover=function()
    {
    clearInterval(flag);
    }
    demo.onmouseout=function()
    {
    flag=setInterval(Marquee,speed);
    }
    }


    //向右滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。
    function toright(demo,demo1,demo2,speed,flag)
    {
    demo=$(demo);
    demo1=$(demo1);
    demo2=$(demo2)
    demo2.innerHTML=demo1.innerHTML
    function Marquee()
    {
    if(demo.scrollLeft<=0)
    {
    demo.scrollLeft=demo2.offsetWidth
    }
    else
    {
    demo.scrollLeft--
    }
    }
    flag=setInterval(Marquee,speed)
    demo.onmouseover=function()
    {
    clearInterval(flag);
    }
    demo.onmouseout=function()
    {
    flag=setInterval(Marquee,speed);
    }
    }

    如需要更多的功能可以参考下面的内容：
    JavaScript 四个方向图片滚动效果
    JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

    显示全文