用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中添加代码

<div id="demo">

<div id="indemo">

<div id="demo1">

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

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

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

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

</div>

     <div id="demo2"></div>

</div>

</div>

alt=图片的描述文字；

text=图片更详细的描述文字
3.用JavaScript实现



注意！！！

将下面的代码放到网页代码的下边，</body>标签下，</html>标签上。

当时深陷此坑很长时间。。。

<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放错位置的坑！！