• js实现文字无间断左右滚动和图片左右滚动


    var MyMar=setInterval(Marquee,speed);
    scroll_div.onmouseover=function() {clearInterval(MyMar);}
    scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
    }
    </script>
    <div id="gongao">
    <div style="900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div">
    <div id="scroll_begin">
    ${affiche.content} ${affiche.content} ${affiche.content}
    ${affiche.content} ${affiche.content} ${affiche.content}
    </div>
    <div id="scroll_end"></div>
    </div>
    <script type="text/javascript">ScrollImgLeft();</script>
    </div>

    //实现图片左右滚动

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>XuLinJie_</title>
    <!--<link href="js图片滚动.css" type="text/css" rel="stylesheet">
    <script src="js图片滚动.js"></script>-->
    </head>
    <style>
    *{
    margin: 0px 0px;
    padding:0px 0px;
    }
    .scroll_div {
    100%;
    height:400px;
    margin:0 0;
    overflow: hidden;
    white-space: nowrap;
    background:#ffffff;
    }
    .scroll_div img {
    100%;
    height:400px;
    }
    #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{
    display:inline;
    }/*设置ul和li横排*/
    </style>
    <body>
    <div id="scroll_div" class="scroll_div">
    <div id="scroll_begin">
    <ul>
    <li><a href="#"><img src="../assets/i/banner.png"></a></li>
    <li><a href="#"><img src="../assets/i/picture.png"></a></li>
    <li><a href="#"><img src="../assets/i/banner.png"></a></li>
    <li><a href="#"><img src="../assets/i/picture.png"></a></li>
    <li><a href="#"><img src="../assets/i/banner.png"></a></li>
    <li><a href="#"><img src="../assets/i/picture.png"></a></li>
    <li><a href="#"><img src="../assets/i/banner.png"></a></li>
    <li><a href="#"><img src="../assets/i/picture.png"></a></li>
    </ul>
    </div>
    <div id="scroll_end"></div>
    </div>
    <!--#####滚动区域#####-->

    <script type="text/javascript">
    ScrollImgLeft();
    function ScrollImgLeft(){
    var speed=10;
    var scroll_begin = document.getElementById("scroll_begin");
    var scroll_end = document.getElementById("scroll_end");
    var scroll_div = document.getElementById("scroll_div");
    scroll_end.innerHTML=scroll_begin.innerHTML;
    function Marquee(){
    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
    {
    scroll_div.scrollLeft-=scroll_begin.offsetWidth;
    }
    else
    {
    scroll_div.scrollLeft++;
    }
    }
    var MyMar=setInterval(Marquee,speed);
    scroll_div.onmouseover=function()
    {
    clearInterval(MyMar);
    }
    scroll_div.onmouseout=function()
    {
    MyMar=setInterval(Marquee,speed);
    }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    Sublime Text 乱码解决(Package Control 和 ConvertToUTF8插件安装)
    Hadoop搭建,上传文件时出现错误,没有到主机的路由
    Hadoop安装成功之后,访问不了web界面的50070端口怎么解决?
    centos7安装ifconfig命令
    Vmware Centos7 配置静态 ip 和 使宿主机和虚拟机互相 ping 通
    parallels desktop虚拟机与Mac共享网络设置方法
    NGINX轻松管理10万长连接
    Nginx upstream性能优化
    Linux性能调优、Linux集群与存储等
    Run time setting设置详解
  • 原文地址:https://www.cnblogs.com/ouchen0312/p/7808606.html
Copyright © 2020-2023  润新知