How does JS achieve simple carousel image special effects? (Detailed explanation with pictures and texts)

Code

Introduce MyTools.js library

1.html

 
 
 


 

  

  

  

  

  

  

  

  

  
  >
  

  
  

 




 

2.css

*{margin: 0;padding: 0  ;}
 a {
  color: #999;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, .4);
 }
 a:hover {
  color: #f8b62b;
 }
 i {
  font-size: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 #box{
  height: 482px;
  width: 830px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
 }
 #box_content{
  height: 100%;
  width: 100%;
  cursor: pointer;
 }
 #box_content img{
  position: absolute;
  vertical-align: top;
  height: 100%;
  width: 100%;
  /*left: 830px;*/
 }
 .box_img{
  width: 100%;
  height: 100%;
  position: absolute;}
 .box_control_right{
  position: absolute;
  right: 0;
 }
 .box_control_left{
  position: absolute;
  left: 0;
 }
 ul{
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-evenly;
 }
 ul>li {
  list-style: none;
  width: 16px;
  height: 16px;
  background-color: #fff;
  margin: 0 3px;
  border-radius: 50%;
  cursor: pointer;
 }
 ul>li.current{
  background-color: darkorange;
 }

3.js

window.addEventListener('load', function (ev) {
  // carousel
  (function () {
  // 1. Get the required label
  var boxCOntent = myTool. $(& # 39; box_content & # 39;);
  var cOntentImg = boxContent.children;
  var boxCOntrol = myTool. $(& # 39; box_control & # 39;);
  var cOntrolBottom = boxControl. children[2];
  // 2. Global index
  var iNow = 0;
  // 3. Dynamically add the picture indicator below according to the number of pictures
  for (var i = 0; i <contentImg. length; i++) {
  var li = document.createElement('li');
  controlBottom.insertBefore(li,controlBottom.children[0]);
  }
  // 4. Make the first image indicator selected
  controlBottom.children[0].className = 'current';
  // 5. Make all pictures except the first picture enter the area to be displayed
  var scrollImgWidth = boxContent. offsetWidth;
  for (var j = 1; j <contentImg. length; j++) {
  contentImg[j].style.left = scrollImgWidth + 'px';
  }
  // 6. Handle left and right clicks
  var cPrev = boxControl. children[0];
  var cNext = boxControl. children[1];
  // 6.1 Click on the left
  cPrev.addEventListener('click', function (evt) {
  // 1. Quickly move the image in the current visible area to the right
  // 2. The previous slide appears on the left side of the visible area
  // 3. Animate this slide into
  myTool.slowMoving(contentImg[iNow],{'left':scrollImgWidth},null);
  iNow--;
  // boundary handling
  if (iNow < 0){
  iNow = contentImg. length - 1;
  }
  contentImg[iNow].style.left = -scrollImgWidth + 'px';
  myTool.slowMoving(contentImg[iNow],{'left':0},null);
  // switch index
  changeIndex();

  }, false);
  // 6.2 Click on the right
  cNext.addEventListener('click', function (evt) {
  autoPlay();
  }, false);
  // 7. Operation of the lower image indicator
  for (var k = 0; k  iNow){
   myTool.slowMoving(contentImg[iNow],{'left':-scrollImgWidth},null);
   contentImg[index].style.left = scrollImgWidth + 'px';
   }else if(index <iNow){
   myTool.slowMoving(contentImg[iNow],{'left':scrollImgWidth},null);
   contentImg[index].style.left = -scrollImgWidth + 'px';
   }
   iNow = index;
   myTool.slowMoving(contentImg[iNow],{'left':0});
   // switch index
   changeIndex();
  }, false);
  })(k)
  }

  /**
  * Toggle index operation
  */
  function changeIndex() {
  for (var i = 0; i = contentImg. length) {
  iNow = 0;
  }
  contentImg[iNow].style.left = scrollImgWidth + 'px';
  myTool.slowMoving(contentImg[iNow], {"left": 0},null);
  // switch index
  changeIndex();
  }

  // 8. Set uptimer
  var timerId = setInterval(autoPlay,2000);
  // 9. Set and clear the timer after the mouse enters the picture p
  myTool.$('box').addEventListener('mouseover', function () {
  clearInterval(timerId);
  });
  myTool.$('box').addEventListener('mouseout', function () {
  timerId = setInterval(autoPlay,2000);
  });

  })();
 },false);

For more js special effects, please move to the js special effects download column.

The above is how to realize the special effect of simple carousel in JS? (Detailed explanation with pictures and texts), please pay attention to other related articles on 1024programmer.com for more details!