zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    08-Linux命令【rm】
    07-Linux命令【mv】
    06-Linux命令【cp】
    05-Linux命令【rmdir】
    04-Linux命令【mkdir】
    03-Linux命令【ls】
    02-Linux命令【cd】
    01-Linux命令【pwd】
    智慧城市3D园区
    自我觉醒
  • 原文地址:https://www.cnblogs.com/ouchen0312/p/7808606.html
Copyright © 2011-2022 走看看