栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

html布局代码
复制代码 代码如下:




无标题文档




































    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)
    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/116122.html
    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号