javascript实现图片无缝滚动_js如何诬陷无缝平移一张图片-CSDN博客

可能因为我比较笨，所以我看了很久才看懂这个代码（代码来自于艾特猫的博客：javascript实现图片无缝滚动（scrollLeft的用法介绍））。这里我先贴出代码，然后再放出我的图解。

<!DOCTYPE html >
<html>

<head>
  <meta charset="UTF-8">
  <title>无标题文档</title>
  <style>
    .piczhanshi {
      width: 976px;
      height: 167px;
      border: 1px #999999 solid;
      margin: 0 auto;
    }

    h3 {
      float: left;
      background-color: #DDD;
      float: left;
      height: 35px;
      width: 966px;
      margin-top: 2px;
      line-height: 35px;
      text-align: center;
      color: #064278;
      font-size: 18px;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 10px;
    }

    .tupian {
      float: left;
      width: 966px;
      height: 120px;
      margin-left: 5px;
      margin-right: 5px;
    }

    .demo {
      width: 966px;
      height: 110px;
      overflow: hidden;
      margin-top: 5px;
      margin-bottom: 5px;
    }


    #indemo {
      width: 800%;
      height: 110px;
    }


    .demo1,
    .demo2 {
      float: left;
    }
  </style>
</head>


<body>
  <div id="piczhanshi" class="piczhanshi">
    <h3>鸟巢效果图</h3>
    <div id="tupian" class="tupian">
      <!--这里是包括图片的最外层div是为了定位而设置的与滚动没关系 -->
      <div id="demo" class="demo">
        <!--// 这里是包括图片的div，也就是须要实现子级div滚动的层（scrollLeft是相对于当前层的子层的），这里必须这是好宽高已经overflow：hidden -->
        <div id="indemo">
          <!--//这个是须要滚动的图片包括层，他的宽度在图片左右滚动效果下，比他的父级div的宽大，这里设置为800%，也就是相当他的父级div来说，他等于父级div宽的8倍-->
          <div id="demo1" class="demo1">
            <!--//这里是包括图片的层，通过“float”和demo2实现无缝连接-->
            <img src="1.jpg" />
            <img src="2.jpg" />
            <img src="3.jpg" />
            <img src="4.jpg" />
            <img src="5.jpg" />
            <img src="6.jpg" />
            <img src="7.jpg" />
            <img src="8.jpg" />
            <img src="9.jpg" />

          </div>
          <div id="demo2" class="demo2"></div>
          <!--//这里通过js代码“ tab2.innerHTML=tab1.innerHTML;”得到demo1的值，通过“float”和demo1实现无缝连接-->
        </div>
      </div>
    </div>
  </div>
  <script language="javascript">
    var speed = 20;
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML; //通过赋值获得tab1的值
    function marquee() {
      if (tab2.offsetWidth - tab.scrollLeft <= 0) //当tab的移动宽度大于等于demo1的时候，scrollLeft为0，也就是恢复到未移动前的情况，继续移动
      {
        tab.scrollLeft = 0
      } else {
        tab.scrollLeft++;
      } //图片层不断的往left移动
    }
    var timer = setInterval(marquee, speed); //定时器
    tab.onmouseover = function() {
      clearInterval(timer)
    }; //鼠标经过容器的时候清除定时器
    tab.onmouseout = function() {
      timer = setInterval(marquee, speed);
    } //鼠标移开容器的时候開始定时器
  </script>

</body>

我们只要关注的是，tab（id为“demo”的div，在最外面）与tab1（id为“demo1”的div）、tab2（id为“demo2”的div）之间的关系。

tab2.innerHTML = tab1.innerHTML; //通过赋值获得tab1的值

通过这句话，我们可以知道tab2中有着与tab1一样的图片。

接下来是我们最关注的如何循环移动的过程：

至于这一段代码：

var timer = setInterval(marquee, speed); //定时器
    tab.onmouseover = function() {
      clearInterval(timer)
    }; //鼠标经过容器的时候清除定时器
    tab.onmouseout = function() {
      timer = setInterval(marquee, speed);
    } //鼠标移开容器的时候開始定时器

设定一个计时器，每经过speed毫秒，就调用一次marquee函数。每次调用的时候，都会检查

tab2.offsetWidth - tab.scrollLeft <= 0

不满足条件，就tab.scrollLeft++，这时候，就出现图片左移的效果。

底下两句 tab.onmouseover 与 tab.onmouseout 是控制鼠标状态，当鼠标移动到图片滚动上的时候，就用

clearInterval(timer)

清除这个计时器，这样就不会调用marquee函数，也就不会进行滚动了。当鼠标移开的时候，调用

timer = setInterval(marquee, speed);

这样就又继续开始移动了。

好了，如果还有什么疑问欢迎在评论区与我讨论。

如果发现了什么问题，也请不吝斧正。

（感谢每一个点进来的你！）

最后再粘贴一个链接（如果你需要的话！）：Google Chrome调试js入门