美文网首页
JS 图文上下无缝轮播

JS 图文上下无缝轮播

作者: 洃冭鎯oo | 来源:发表于2021-01-27 16:36 被阅读0次
    • html 代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
    *{margin:0;padding:0}
    #slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}
    #slide p{height:34px;line-height:34px;overflow:hidden}
    #slide span{float:right}
    </style>
    </head>
    <body>
     
    <div id="slide">
        <div id="slide1"> 
            <p><span>asd1</span>1、dqx5***</p>
            <p><span>asd2</span>2、s376***</p>
            <p><span>asd3</span>3、sdk1***</p>
            <p><span>asd4</span>4、dfdfd</p>
            <p><span>asd5</span>5、goods</p>
            <p><span>asd6</span>6、gao6***</p>
            <p><span>asd7</span>7、ando***</p>
            <p><span>asd8</span>8、6813***</p>
            <p><span>asd9</span>9、lais***</p>
        </div>
        <div id=slide2></div>
    </div>
     
    <script>
        var speed=80
        var slide=document.getElementById("slide");
        var slide2=document.getElementById("slide2");
        var slide1=document.getElementById("slide1");
        slide2.innerHTML=slide1.innerHTML
        function Marquee(){
            if(slide2.offsetTop-slide.scrollTop<=0)
                slide.scrollTop-=slide1.offsetHeight
            else{
                slide.scrollTop++
            }
        }
        var MyMar=setInterval(Marquee,speed)
        slide.onmouseover=function(){clearInterval(MyMar)}
        slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
    </script>
     
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:JS 图文上下无缝轮播

          本文链接:https://www.haomeiwen.com/subject/nuuazktx.html