用JavaScript实现无空白的走马灯效果

图片向左滚动 

1.添加CSS样式

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 965px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

2.在html中添加代码

id="demo">

id="indemo">

id="demo1">

href="#"> src="image/图片1.jpg" width="250" height="170" alt="" />

href="#"> src="image/图片2.gif" width="250" height="170" alt="" />

href="#"> src="image/图片3.jpg" width="250" height="170" alt="" />

href = "#" > src = "image/图片4.jpg" width = "250" height = "170" alt = "" />

     id="demo2">

• alt=图片的描述文字；
  
• text=图片更详细的描述文字

3.用JavaScript实现

注意！！！

将下面的代码放到网页代码的下边，标签下，标签上。
当时深陷此坑很长时间。。。

<script type="text/javascript">

    var speed = 15;

    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>

其他的上，下，右的滚动方式也相类似，网上的资源很多，主要是学会这个套路。。。尤其是别陷入JavaScript放错位置的坑！！