Native JS motion realization carousel map

Carousel diagram of native JS motion realization

** Basic principle: ** The effect of automatic picture movement is realized by controlling the left value of ul containing n pictures, in which the number of li elements in the list is n, and the pictures stored in the first li and the last li should be the same picture. When the picture moves to the last one, the left value of ul is set to 0, which can achieve the effect of wireless picture carousel.

Realization of motion function

The function passes in the element (that is, the element that needs to participate in the movement), the target value (rendered as an object, such as {left: 300}), and callback (callback function).

// Multi-object multi-value motion + Callback mechanism 
function startMove(dom, attrObj, callback) {
 var key = true;
 var iSpeed = null,
  iCur = null;
 clearInterval(dom.timer);
 if (key) {
  dom.timer = setInterval(function() {
  //bStop Used to determine whether to start executing the callback function 
   var bStop = true;
   // Determines whether the "key" type in the passed-in target value is opacity
   for (var attr in attrObj) {
   // To change the style to opacity The element's opacity Expand 100 Be operated on 
    if (attr === 'opacity') {
     iCur = parseFloat(getStyle(dom, attr)) * 100;
    } else {
     iCur = parseInt(getStyle(dom, attr));
    }
    // The motion speed is set to the target value minus the current value 1 Half, that is, the closer the current state is to the target value, the smaller the motion speed is 
    iSpeed = (attrObj[attr] - iCur) / 2;
    // Rounding the speed 
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    if (attr === 'opacity') {
     dom.style.opacity = (iCur + iSpeed) / 100;
    } else {
     dom.style[attr] = iCur + iSpeed + 'px';
    }
    if (iCur !== attrObj[attr]) {
     bStop = false;
    }
   }
   // When bStop For true When all the styles of the element have reached the target value, clean the timer and execute the callback function 
   if (bStop) {
    clearInterval(dom.timer);
    typeof callback == 'function' && callback();
   }
  }, 30)
 }
 if (!key) {

 }
}
// Used to get the real-time style value of an element 
function getStyle(elem, prop){
 if (window.getComputedStyle){
  return window.getComputedStyle(elem, null)[prop];
 }
}

HTML Part

HTML contains one div to display the picture to be played at present, and the div also contains one ul (used to store all li containing pictures) and three div (two of which act as buttons for switching pictures left and right, and the third stores picture index points, which can also switch to the picture to be viewed by clicking the index). The code is as follows:

<div class="wrapper">
 <ul class="sliderPage">
  <li>
   <img src="./image/dog/ Alaska .jpeg"/>
  </li>
  <li>
   <img src="./image/dog/ Bear .jpeg"/>
  </li>
  <li>
   <img src="./image/dog/ Border grazing .jpeg"/>
  </li>
  <li>
   <img src="./image/dog/ Corgi .jpeg"/>
  </li>
  <li>
   <img src="./image/dog/ Alaska .jpeg"/>
  </li>
 </ul>
 <div class="btn leftBtn">&lt;</div>
 <div class="btn rightBtn">&gt;</div>
 <div class="sliderIndex">
  <span class="active"></span>
  <span></span>
  <span></span>
  <span></span>
 </div>
</div>

CSS code

Inline style sheets are used here

<style>
 *{
  margin: 0;
  padding: 0;
  list-style: none;
 }
 .wrapper{
  position: relative;
  margin: 100px auto 0;
  width: 600px;
  height: 360px;
  overflow: hidden;
 }
 .wrapper .sliderPage{
  position: absolute;
  left: 0;
  width: 3000px;
  height: 360px;
 }
 .wrapper .sliderPage li{
  width: 600px;
  height: 360px;
  float: left;
 }
 .wrapper .sliderPage li img{
  width: 100%;
  height: 100%;
 }
 .btn{
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  color: #fff;
  text-align: center;
  line-height: 20px;
  background-color: #000;
  opacity: 0.2;
  cursor: pointer;
 }
 .leftBtn{
  left: 5px;
 }
 .rightBtn{
  right: 5px;
 }
 .wrapper:hover .btn{
  opacity: 0.8;
 }
 .sliderIndex{
  position: absolute;
  width: 100%;
  bottom: 10px;
  cursor: pointer;
  text-align: center;
 }
 span{
  width: 8px;
  height: 8px;
  background-color: #cccccc;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
 }
 .active{
  background-color: orange;
 }
</style>

Automatic picture motion and click motion event binding

Key points:

1. When the picture moves to the last one (the displayed picture is the first picture), the left value of ul is set to 0 to realize unlimited carousel;
2. The value of each motion of the picture is the width of li;
3. The motion of the picture needs a fixed time, so other timers should be prohibited during the motion of the picture, otherwise the motion size will be confused and the picture carousel will have problems. Here, lock is used to realize it. In the motion of ul, the value of lock is set to false, and after the motion, the value of lock is set to true;
4. Realize the function of indexing and displaying pictures through index value. In the process of picture carousel, the initial value of index is 0, when the picture is carousel to the right, the value of index is added by 1, when the picture is carousel to the left, the value of index is minus by 1, when the value of index is 0, if the picture is carousel to the left, the value of index is set to n (the number of li) and carousel is carried out. When index is 3 and the picture is carousel to the right, index is set to 0 after ul movement is completed;

var timer = null;
var sliderPage = document.getElementsByTagName('ul')[0];
var moveWidth = sliderPage.children[0].offsetWidth;
var num = sliderPage.children.length - 1;
var leftBtn = document.getElementsByClassName('leftBtn')[0];
var rightBtn = document.getElementsByClassName('rightBtn')[0];
var lock = true;
var index = 0;
var indexArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
// Index switching 
for (var i = 0; i < indexArray.length; i ++){
 (function(myindex){
  indexArray[myindex].onclick = function(){
   lock = false;
   clearTimeout(timer);
   index = myindex;
   changeIndex(index);
   startMove(sliderPage, {left: -index * moveWidth}, function(){
    lock = true;
    timer = setTimeout(autoMove, 3000);
   })
  }
 }(i))
}
// The picture changes during movement index Style of dots 
function changeIndex(index){
 for (var i = 0; i < indexArray.length; i++){
  indexArray[i].className = '';
 }
 indexArray[index].className = 'active';
}
timer = setTimeout(autoMove, 3000);
// Turn to the left 
leftBtn.onclick = function (){
 autoMove('right->left');
}
// Turn to the right 
rightBtn.onclick = function (){
 autoMove('left->right');
}
//direction
// Default carousel direction  'left->right' / undefined
// Click left Button  'right->left'
function autoMove(direction){
 clearTimeout(timer);
 if (lock){
  lock = false;

  if (!direction || direction === 'left->right'){
   index++;
   startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function(){
    if (sliderPage.offsetLeft === - num * moveWidth){
     index = 0;
     sliderPage.style.left = '0px';
    }
    timer = setTimeout(autoMove, 3000);
    lock = true;
    changeIndex(index);
   });
  }else if(direction === 'right->left'){
   if (sliderPage.offsetLeft === 0){
    index = num;
    sliderPage.style.left = - num * moveWidth + 'px';
   }
   index--;
   startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {
    timer = setTimeout(autoMove, 3000);
    lock = true;
    changeIndex(index);
   })
  }
 }
}

The above is the picture carousel realized by the native JS movement.