图片连续滚动

最新推荐文章于 2024-08-14 15:45:18 发布

asdas32d12313

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量110

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Yue0327/p/5490028.html

版权

<!---------图片无缝轮换------------><body>
<div id="demo">
       <div id="indemo">
           <div id="demo1">
               <a href="#"><img height="90px" src="images/l1.jpeg" border="0" /></a>
               <a href="#"><img height="90px" src="images/l2.jpeg" border="0" /></a>
               <a href="#"><img height="90px" src="images/l3.jpeg" border="0" /></a>
               <a href="#"><img height="90px" src="images/l4.jpeg" border="0" /></a>
               <a href="#"><img height="90px" src="images/l5.jpeg" border="0" /></a>
               <a href="#"><img height="90px" src="images/l6.jpeg" border="0" /></a>
           </div>
           <div id="demo2"></div>
       </div>
</div>
</body>

<script type="text/javascript">
var speed=10;
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;

    function Marquee(){
        if(tab2.offsetWidth-tab.scrollLeft<=0)
            tab.scrollLeft-=tab1.offsetWidth
        else{
            tab.scrollLeft++;
        }
    }

    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>




<style>
    #demo {
        background: #FFF;
        overflow:hidden;
        /*border: 1px dashed #CCC;*/
        width: 100%;
    }
    #demo img {
        border: 3px solid #F2F2F2;
    }
    #indemo {
        float: left;
        width: 800%;
    }
    #demo1 {
        float: left;
    }
    #demo2 {
        float: left;
    }
</style>

转载于:https://www.cnblogs.com/Yue0327/p/5490028.html

asdas32d12313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片连续滚动

<body><div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img height="90px...
复制链接

扫一扫