zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    JDK8新特性
    控制线程同步的方法
    Java面向对象(一)20170517
    Java语言基础-递归
    勒索病毒应对措施
    JAVA application 初步20170515
    JAVA语言基础(二)20170511
    JAVA语言基础(二)20170510
    JAVA学习概述(一)20170508
    我有一个读绘本的妈妈
  • 原文地址:https://www.cnblogs.com/zhao12354/p/5800669.html
Copyright © 2011-2022 走看看