• javascript -- (无间断滚动图片)


    无间断滚动图片 --原理(定时器 每隔.1秒调用一次滚动的函数)

    /***body**/

    <div id="wrap">

      <div id="box">

        <img src="img/1.jpg" alt="" />

        <img src="img/2.jpg" alt="" />

        <img src="img/3.jpg" alt="" />

        <img src="img/4.jpg" alt="" />

        <img src="img/5.jpg" alt="" />

        <img src="img/6.jpg" alt="" />

      </div>

    </div>

    /***body部分结束**/

    /***style样式**/

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      #wrap {

         800px;

        height: 300px;

        border: 1px solid gray;

        margin: auto;

        overflow: hidden;

        position: relative;

        margin-top: 150px;

      }

      #box {

        height: 300px;

         9999999px;

        position: absolute;

      }

      #box >img {

        height: 300px;

         200px;

        float: left;

      }  

    </style>

    /***style部分结束**/

    /***script**/

    <script type="text/javascript">

      /***获取box标签**/

      var box = document.getElementById('box');

      /***获取所有的img标签**/

      var img = document.querySelectorAll('#box img');

      /***定义变量接收img的总宽度**/

      var imgCountWidth = img.length * 200;

      /***定义变量记录x轴的位置**/

      var x = 0;

      /***复制box标签**/

      box.innerHTML += box.innerHTML;

      /***定义函数处理滚动**/

      function scroll() {

        x--;

        if(x== -imgCountWidth) {

          x = 0;

        }

        box.style.left = x + 'px';

      }

      /***定时器调用**/

      setInterval(scroll,1);

    </script>

  • 相关阅读:
    Struts2(二)
    jiqixuexi
    UTF-8
    mysql load
    linux命令(转)
    apache FTP站点源码下载
    linux 命令
    clickhouse 查询
    CDH learning
    nfs
  • 原文地址:https://www.cnblogs.com/zhao12354/p/5800669.html
Copyright © 2020-2023  润新知