可自定义速度的js图片无缝滚动示例分享

一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了。你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了。

复制代码 代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向左滚动</title>
    <style type="text/css">
    img{
     border: none;
    }
    </style>
</head>
<body>
<div>
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td valign="top" bgcolor="ffffff">
      <!-- 特别注意,下面的图片总宽度必须大于上面定义的demo的宽度,如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题! -->
          <table cellspacing="0" cellpadding="0">
          <tr>
            <td><a href="#" target="_blank"><img src="https://www.jb51.net/images/1.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="https://www.jb51.net/images/2.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="https://www.jb51.net/images/3.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="https://www.jb51.net/images/4.jpg"></a></td>
            <td><a href="#" target="_blank"><img src="https://www.jb51.net/images/5.jpg"></a></td>
          </tr>
        </table>
      </td>

      <td valign="top">

   </td>

    </tr>
  </table>
</div>

<div></div>
<script type="text/javascript" src="https://www.jb51.net/jquery.js"></script>

<script type="text/javascript">

//0:定速度
  var speed = 30;
  //1:获取元素  demo demo1 demo2
  var demo = $("#demo");
  var demo1 = $("#demo1");
  var demo2 = $("#demo2");
  //2:复制 demo1-->demo2
  var cont = $("#demo1").html();
  $("#demo2").html(cont);

 
  //3:创建方法定时执行
  function hello(){
     var left = $("#demo").scrollLeft();
  if(left >= $("#demo1").width()){
   left = 0;
  }else{
   left++;
  }
  $("#demo").scrollLeft(left);

 setTimeout("hello()",speed);
  }
  hello();
  //   移动demo.scrollLeft();

</script>
</body>
</html>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdypxs.html