Home > Article > Web Front-end > Javascript sample code to achieve seamless scrolling effect of multiple pictures left and right

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

黄舟Original: 2017-03-22 14:26:331647browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to three ways to clear arrays in JavaScriptNext article：Detailed introduction to three ways to clear arrays in JavaScript

See more

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

Related articles