First, seamless continuous rolling effects

1, seamless continuous rolling principle

For example, if there are 6 pictures, the sequence is 0 to 5

Then join the same 0~5 pictures in the back for scrolling

When the 0th picture of the second group is moved to the left of the scroll area (i.e. the first group is moved), immediately continue to move the picture from the beginning

2, seamless continuous scrolling code implementation

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } .box { width: 1000px; height: 130px; border: 1px solid #000; margin: 50px auto; overflow: hidden; } .box ul { list-style: none; /* Set it to a larger size to float li */ width: 5000px; position: relative; } .box ul li { float: left; margin-right: 10px; } </style> </head> <body> <div id="box" class="box"> <ul id="list"> <li><img src="images/number/0.png" alt=""></li> <li><img src="images/number/1.png" alt=""></li> <li><img src="images/number/2.png" alt=""></li> <li><img src="images/number/3.png" alt=""></li> <li><img src="images/number/4.png" alt=""></li> <li><img src="images/number/5.png" alt=""></li> </ul> </div> <script> var box = document.getElementById('box'); var list = document.getElementById('list'); // Copy all li list.innerHTML += list.innerHTML; Var left = 0; var left = 0; Var timer; move(); Function move() {// Set the table to close to prevent animation from building up clearInterval(timer); timer = setInterval(function () { left -= 4; If (left <= -1260) {left = 0; } list.style.left = left + 'px'; }, 20); Onmouseenter = function () {clearInterval(timer); }; Timer box.onmouseleave = function () {move(); }; </script> </body> </html>Copy the code

Second, running round broadcast map special effects

2-1. Implementation principle and notes

Suppose you want to rotate 5 pictures, click the right button to play the next picture, click the left button to play the last picture.

2-1-1, layout rotation map, click the right button to switch to the next picture

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } .carousel { width: 650px; height: 360px; border: 1px solid #000; margin: 50px auto; position: relative; overflow: hidden; } .carousel ul { list-style: none; width: 6000px; position: relative; left: 0px; transition: left .5s ease 0s; } .carousel ul li { float: left; } .carousel .leftbtn { position: absolute; left: 20px; top: 50%; margin-top: -25px; width: 50px; height: 50px; background-color: rgb(226, 68, 28); border-radius: 50%; } .carousel .rightbtn { position: absolute; right: 20px; top: 50%; margin-top: -25px; width: 50px; height: 50px; background-color: rgb(226, 68, 28); border-radius: 50%; } </style> </head> <body> <div class="carousel"> <ul id="list"> <li><img src="images/beijing/0.jpg" alt=""></li> <li><img src="images/beijing/1.jpg" alt=""></li> <li><img src="images/beijing/2.jpg" alt=""></li> <li><img src="images/beijing/3.jpg" alt=""></li> <li><img src="images/beijing/4.jpg" alt=""></li> </ul> <! <a href="javascript:;" class="leftbtn" id="leftbtn"></a> <a href="javascript:;" Class ="rightbtn" id="rightbtn"></a> </div> Var leftbtn = document.getelementById ('leftbtn'); var rightbtn = document.getElementById('rightbtn'); var list = document.getElementById('list'); var idx = 0; Rightbtn. onclick = function () {idx++; List.style. left = -idx * 650 + 'px'; </script> </body> </ HTML >Copy the code
  • Note that each diagram is arranged in a floating manner, and ul width should be large enough to arrange Li
  • We can add a transition effect to the left attribute of ul to make the movement more silky

At this point, we will find that when we click again and again, the image goes blank after the fifth image is rotated, so how do we rotate to the last image and then rotate from the first image?

2-1-2. Realize the linkage effect between the last picture and the first picture

Implementation principle:

  • Clone a copy of the first image and append it to the last image, so that the first image can be seen by clicking again after the last image is rotated
  • To change to the second image when the button is clicked again, we can quickly set the left of the UL element to 0 after moving to the clone image
  • Here we add a transition animation for UL, the animation length is 0.5s, so we need to wait for the animation length before quickly setting ul left to 0
  • There is no need for the naked eye to notice when ul’s left is quickly set to 0, so the transition effect should be removed here
Var leftbtn = document.getelementById ('leftbtn'); var rightbtn = document.getElementById('rightbtn'); var list = document.getElementById('list'); / / cloned the first picture, appended to the var cloneli = list. FirstElementChild. CloneNode (true); list.appendChild(cloneli); var idx = 0; Rightbtn.onclick = function () {// To prevent the transition from being reset to 'none', Transition = 'left.5s ease 0s'; idx++; If (idx > 4) {setTimeout(function () {list.style.transition = 'none'; list.style.left = 0; idx = 0; }, 500); } list.style.left = -idx * 650 + 'px'; // indicate the position to move to the left, each image width is 650}Copy the code

2-1-3, optimization: add throttling lock to prevent fast click on the wheel broadcast chart playing abnormalities

We can set a throttle lock since the transition animation is played in 500ms for the rotation diagram here

var idx = 0; Var lock = true; rightbtn.onclick = function () { if (! lock) { return } lock = false; List.style. transition = 'left.5s ease 0s'; idx++; If (idx > 4) {setTimeout(function () {list.style.transition = 'none'; list.style.left = 0; idx = 0; }, 500); } list.style.left = -idx * 650 + 'px'; SetTimeout (function () {lock = true; }, 500); }Copy the code

Click the left button to switch to the previous wheel cast graph

  • If it is already the first rote image, click the left button to switch to the last image, then you need to teleport to the last cloned image spliced together (remove the transition effect); Then add a transition effect to move the wheel image to the real last image
  • If it is not the first round map, then IDX — normal movement is ok
leftbtn.onclick = function () { if (! lock) return; lock = false; List.style. transition = 'none'; list.style.transition = 'none'; list.style.transition = 'none'; List. style.left = -5 * 650 + 'px'; // Set a delay timer, the delay time can be 0 ms, although it is 0 ms, but can let us transition first instant cancel, SetTimeout (function () {list.style.transition = 'left.5s ease '; // idx = 4; list.style.left = -idx * 650 + 'px'; }, 0); } else { idx--; list.style.left = -idx * 650 + 'px'; } // function throttling setTimeout(function () {lock = true; }, 500); }Copy the code

It is important to note that if you have already is the first picture, then click the left button to cancel the transition and then teleport to clone in the picture, then add truly transition to move to the last picture, restore transition when using the setTimeout here is to cancel the transition of blinking effect, or teleport or there will be a transition effects.

2-2. Complete code

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .carousel {
    width: 650px;
    height: 360px;
    border: 1px solid #000;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
  }

  .carousel ul {
    list-style: none;
    width: 6000px;
    position: relative;
    left: 0px;
    transition: left .5s ease 0s;
  }

  .carousel ul li {
    float: left;
  }

  .carousel .leftbtn {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    background-color: rgb(226, 68, 28);
    border-radius: 50%;
  }

  .carousel .rightbtn {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    background-color: rgb(226, 68, 28);
    border-radius: 50%;
  }
</style>
</head>

<body>
<div class="carousel">
  <ul id="list">
    <li><img src="images/beijing/0.jpg" alt=""></li>
    <li><img src="images/beijing/1.jpg" alt=""></li>
    <li><img src="images/beijing/2.jpg" alt=""></li>
    <li><img src="images/beijing/3.jpg" alt=""></li>
    <li><img src="images/beijing/4.jpg" alt=""></li>
  </ul>
  <!-- href写成空的javascript以防止页面刷新 -->
  <a href="javascript:;" class="leftbtn" id="leftbtn"></a>
  <a href="javascript:;" class="rightbtn" id="rightbtn"></a>
</div>
<script>
  // 得到按钮和ul，ul整体进行运动
  var leftbtn = document.getElementById('leftbtn');
  var rightbtn = document.getElementById('rightbtn');
  var list = document.getElementById('list');

  // 克隆第一张图片追加到list中
  var cloneLi = list.firstElementChild.cloneNode(true);
  list.appendChild(cloneLi);

  // 表示滚动到了第几个图片
  var idx = 0;
  // 设置一个节流锁，防止快速点击
  var lock = true;
  rightbtn.onclick = function () {
    if (!lock) { return }
    lock = false;
    // 为了防止滚动到最后最后一张图后快速移动图片置第一张后去除掉了动画，要在点击时添加一遍
    list.style.transition = 'left .5s ease 0s';
    idx++;
    if (idx > 4) {
      // 在动画0.5s执行完毕后瞬间将list的left值置为0
      setTimeout(() => {
        list.style.transition = 'none';
        list.style.left = 0;
        idx = 0;
      }, 500)
    }
    // 这里每张图片宽度是650px
    list.style.left = -idx * 650 + 'px';
    setTimeout(() => {
      lock = true
    }, 500);
  }

  leftbtn.onclick = function () {
    if (!lock) { return }
    lock = false;
    if (idx == 0) {
      list.style.transition = 'none';
      // 直接瞬间移动到最后的假图片上
      list.style.left = -5 * 650 + 'px';
      // 设置一个延时器，这个延时器的延时时间可以是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上
      setTimeout(function () {
        // 加过渡
        list.style.transition = 'left .5s ease 0s';
        // idx改为真正的最后一张
        idx = 4;
        list.style.left = -idx * 650 + 'px';
      }, 0);
    } else {
      idx--;
      list.style.left = -idx * 650 + 'px';
    }
    setTimeout(() => {
      lock = true
    }, 500)
  }
</script>
</body>
</html>
Copy the code

Summary: The main point of the rotation diagram is that all the pictures are arranged in a floating row, and the parent element changes the left value to move; In addition, in order to play the effect of rotation, to clone the first picture Mosaic to the last:

  • When moving to the last picture and moving backward again, first move to the clone picture, and then change the left to 0 immediately before moving (if there is a transition animation, it is necessary to set the delay timer, and reset it again after the animation effect ends).
  • Before moving to the first image and then moving to the previous image, you need to teleport to the clone image and then move to the actual last image

3. Special effects of breathing lamp wheel broadcast map

3-1. Implementation principle

Different from the rotation effect of the running lantern, the breathing lamp effect requires each rotation image to be stacked together. The above one “fades out” and the next one “fades in” to achieve the effect, and there is no need to clone the first image and splicing it to the end.

  • First of all, the positioning method is used to make each opacity diagram stack and display. The first opacity diagram is set as 1, while the remaining opacity diagram is set as 0. In order to achieve the effect of fade-out and fade-in, a transition animation can be added for UL
  • When clicking the left/right buttons, make the current opacity of the previous/next opacity change to 0 and 1 respectively
  • The use of throttling lock is also required. For example, if the transition animation time is 1s, the lock duration is also set to 1s

3-2. Code implementation

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } .carousel { width: 650px; height: 360px; border: 1px solid #000; margin: 50px auto; position: relative; } .carousel ul { list-style: none; } .carousel ul li { position: absolute; top: 0; left: 0; /* Opacity is 0 */ opacity: 0; transition: opacity 1s ease 0s; Carousel ul li:first-child {opacity: 1; } .carousel .leftbtn { position: absolute; left: 20px; top: 50%; margin-top: -25px; width: 50px; height: 50px; background-color: rgb(28, 180, 226); border-radius: 50%; } .carousel .rightbtn { position: absolute; right: 20px; top: 50%; margin-top: -25px; width: 50px; height: 50px; background-color: rgb(28, 180, 226); border-radius: 50%; } </style> </head> <body> <div class="carousel"> <ul id="list"> <li><img src="images/beijing/0.jpg" alt=""></li> <li><img src="images/beijing/1.jpg" alt=""></li> <li><img src="images/beijing/2.jpg" alt=""></li> <li><img src="images/beijing/3.jpg" alt=""></li> <li><img src="images/beijing/4.jpg" alt=""></li> </ul> <a href="javascript:;" class="leftbtn" id="leftbtn"></a> <a href="javascript:;" Class ="rightbtn" id="rightbtn"></a> </div> Var leftbtn = document.getelementById ('leftbtn'); var rightbtn = document.getElementById('rightbtn'); var list = document.getElementById('list'); var lis = list.getElementsByTagName('li'); Var idx = 0; Var lock = true; // right button rightBtn.onclick = function () { lock) return; lock = false; Opacity: lis[idx].style. Opacity = 0; idx++; if (idx > 4) idx = 0; Background: lis[idx].style. Opacity = 1; SetTimeout (function () {lock = true; }, 1000); } // left button leftbtn.onclick = function () {// Judge throttling if (! lock) return; lock = false; Opacity: lis[idx].style. Opacity = 0; idx--; if (idx < 0) idx = 4; Background: lis[idx].style. Opacity = 1; SetTimeout (function () {lock = true; }, 1000); } </script> </body> </html>Copy the code