图片连续滚动 

<!---------图片无缝轮换------------><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>

 

posted @ 2016-05-13 17:01  小美好。  阅读(154)  评论(0)  编辑  收藏  举报