Customizable speed of js images for seamless scrolling example sharing

2020-03-30 01:23:40
OfStack

Ideas:

A set of images controls its scroll bar to scroll and at this point copies the set of images and adds them to the original picture group. Now you have two sets of images. As you can imagine, now that the scroll bar continues to scroll, the last image of the original group of images has rolled to the top and disappeared, and the first image of the copied group of images appears after the last image of the original, you can feel the seamless scrolling.


<!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 Scroll to the left </title>
    <style type="text/css">
    img{
     border: none;
    }
    </style>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td id="demo1" valign="top" bgcolor="ffffff">
      <!--  In particular, the total width of the following image must be greater than that defined above demo The width of, as above demo The width is 500px, The total width of the following picture must be greater than 500, Otherwise there will be some problems!  -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="images/1.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/2.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/3.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/4.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="images/5.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>

      <td id="demo2" valign="top">

   </td>

    </tr>
  </table>
</div>
<div id="msg"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
  //Zero: set the pace
  var speed = 30;
  //1: getting the element & NBSP; The demo not demo2
  var demo = $("#demo");
  var demo1 = $("#demo1");
  var demo2 = $("#demo2");
  //2: copy not -> demo2
  var cont = $("#demo1").html();
  $("#demo2").html(cont);

  
  //3: create methods to execute on time
  function hello(){
     var left = $("#demo").scrollLeft();
  if(left >= $("#demo1").width()){
   left = 0;
  }else{
   left++;
  }
  $("#demo").scrollLeft(left);

 setTimeout("hello()",speed); 
  }
  hello();
  //    Mobile demo. ScrollLeft ();

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