Javascript sample code to achieve seamless scrolling effect of multiple pictures left and right-JS Tutorial-php.cn

Javascript sample code to achieve seamless scrolling effect of multiple pictures left and right

黄舟

Release： 2017-03-22 14:26:33

Original

1682 people have browsed it

This article mainly introduces javascript examples of achieving seamless scrolling effect of multiple pictures left and right. Has very good reference value. Let’s take a look with the editor below

Structure: box contains ul, ul contains 4 li; ul is absolutely positioned.

Copy li-1 and li-2 to the end of li-4. In order to distinguish them from li-1 and li-2, the content is changed to li-5 and li-6, and the color remains unchanged. At this time ul contains 6 li.

It should be noted that the big box ul is moved instead of li.

Principle: When the left value of ul's absolute positioning is equal to the width of (li-1+li-2+li-3+li-4), use Javascript to quickly restore the left value to 0.

Please pay attention to the changes in numbers and colors inside the box at this time!

Rendering:

Javascript sample code to achieve seamless scrolling effect of multiple pictures left and right

##Sample code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style media="screen">
  *{
   padding: 0;
   margin: 0;
  }
  ul,li {
   list-style: none;
  }
  img {
   vertical-align: top;
  }
  #box{
   width: 400px;
   height: 100px;
   margin: 100px auto;
   background-color: pink;
   position: relative;
   overflow: hidden;
  }
  #box ul {
   width: 2000px;
   position: absolute;
   left: 0;
   top: 0;
  }
  #box li {
   float: left;
  }
  .aa {
   width: 200px;
   height: 100px;
  }
  .li-1{
   background-color: #f6e659;
  }
  .li-2{
   background-color: #57fa4f;
  }
  .li-3{
   background-color: #3a8ef1;
  }
  .li-4{
   background-color: #c057f1;
  }
 </style>
</head>
<body>
 <p id="box">
  <ul>
   <li class="li-1 aa">li-1</li>
   <li class="li-2 aa">li-2</li>
   <li class="li-3 aa">li-3</li>
   <li class="li-4 aa">li-4</li>
   <li class="li-1 aa">li-5</li>
   <li class="li-2 aa">li-6</li>
  </ul>
 </p>
</body>
</html>
<script type="text/javascript">
 var box = document.getElementById("box");
 var ul = box.children[0];
 var num = 0;
 timer = setInterval(fn,10);
 function fn() {
  num--;
  num <= -800 ? num = 0 : num;
  ul.style.left = num + "px";
 }
</script>

Copy after login

The above is the detailed content of Javascript sample code to achieve seamless scrolling effect of multiple pictures left and right. For more information, please follow other related articles on the PHP Chinese website!