Writing Seamless Carousel Graph with js Code

In this paper, we share the specific code of js seamless carousel diagram for your reference. The specific contents are as follows

Preface

This is a carousel

Hint:

Please make the last img and the first img the same as one picture
And the number of li is the number of img-1;

1. Seamless carousel map

Let the first and last sheets be the same
type: The first one is the same as the last one;
When switching from the last one to the next one, jump to the first one and switch to the second one normally

2. Use steps

1. html code

The code is as follows (example):

<div class="banner">
 <div class="qh">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="left"></div>
 <div class="right"></div>
 <ul class="banner_img clear">
  <li>
  <img src="img/1.png" alt="">
  </li>
  <li>
  <img src="img/2.png" alt="">
  </li>
  <li>
  <img src="img/3.png" alt="">
  </li>
  <li>
  <img src="img/4.png" alt="">
  </li>
  <li>
  <img src="img/5.png" alt="">
  </li>
  <li>
  <img src="img/6.png" alt="">
  </li>
  <li>
  <img src="img/7.png" alt="">
  </li>
  <li>
  <img src="img/1.png" alt="">
  </li>
 </ul>
</div>

css code

 *{
 margin:0;
 padding:0;
}
 .banner {
  position: relative;
  margin: auto;
  margin-top: 20px;
  width: 1140px;
  height: 600px;
  border: 1px solid #000;
  overflow: hidden;
 }

 .banner ul {
  position: relative;
  width: 10000px;
 }

 .banner ul li {
  width: 1140px;
  height: 100%;
  float: left;
 }

 .banner ul img {
  width: 1140px;
  height: 100%;
  object-fit: cover;
 }

 .banner>div {
  position: absolute;
 }

 .banner .qh {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 20px;
  z-index: 1;
 }

 .banner .qh div {
  margin-right: 10px;
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid #f0f;
  border-radius: 5px;
  float: left;
  z-index: 1;
 }
 .left{
  top: 0;
  bottom: 0;
  margin: auto;
  height: 40px;
  width: 20px;
  background: #f0f;
  left: 0;
  z-index: 1;
 }
 .right{
  top: 0;
  bottom: 0;
  margin: auto;
  height: 40px;
  background: #f0f;
  width: 20px;
  right: 0;
  z-index: 1;
 }

2. js code

The code is as follows:

startMove is a motion frame buffering motion; Of course, you can also use other ones

var odiv = document.querySelector(".banner");
var oul = document.querySelector(".banner_img");
var aimg = oul.querySelectorAll("img");
var oqh = document.querySelector(".qh")
var aqh_div = oqh.querySelectorAll("div");
var alist = aimg[0].offsetWidth;
var i=0;
 init();
 function init(){
  for (var j=0; j<aimg.length-1;j++) {
  aqh_div[j].style.background="transparent";
  }
  if (i<aimg.length-1) {
  aqh_div[i].style.background="#f0f"; 
  }else{
  aqh_div[0].style.background="#f0f"; 
  }
 
 }
 function next() {// Under 1 Zhang 
  i++;
  let left =i*(-alist);
  if (left <= -alist * (aimg.length)) {
  oul.style.left = "0px";
  i=1;
  left =-alist*i;
  }
  startMove(oul, { left: left });
  init();
 }
 function back() {// Upper 1 Zhang 
  i--;
  let left = i*(-alist);
  if(i<0) {
  oul.style.left = (aimg.length-1)* (-alist)+"px";
  i=aimg.length-2;
  left= i*(-alist);
  }
  startMove(oul, { left: left });
  init();
 }
 function move(i) {// Jump to number one i Zhang  i From 0 Begin 
  window.i=i;
  left = i* (-alist);
  startMove(oul, { left: left });
  init();
 }
 for (let i in aqh_div) {
  aqh_div[i].onclick = function () {
  move(i);
  console.log(i);
  }
 }


// Below is 1 A move-in div Pause timer   Move out to open the timer 

 odiv.Interval = setInterval(next, 2000);
 odiv.onmouseenter = function () {
  clearInterval(odiv.Interval);
 };
 odiv.onmouseleave = function () {
  clearInterval(odiv.Interval);
  odiv.Interval = setInterval(next, 2000);
 };
// Here are two buttons to switch left and right 
 var left_btn=document.querySelector(".left");
 var right_btn=document.querySelector(".right");
 left_btn.onclick=function(){
  back();
 }
 right_btn.onclick=function(){
  next();
 }



// Below is 1 Motion frame   No. 1 1 Parameters are moving objects   No. 1 2 A Wei json Object { Attribute to change: Value }
//  No. 1 3 To do things after the exercise   The parameter is 1 Functions 

 /**
 *
 * @param obj  Moving object 
 * @param json {width:400, height:400}
 * @param fnEnd Callback 
 */
 function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
  var bStop = true;
  for (attr in json) {
   // 1.  Gets the current value (which can be widht , height , opacity Value of, etc.) 
   var objAttr = 0;
   if (attr == "opacity") {
   objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
   } else {
   objAttr = parseInt(getStyle(obj, attr));
   }
   // 2. Calculate the velocity of motion 
   var iSpeed = (json[attr] - objAttr) / 50;// Buffer motion 
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   // 3.  Detect whether all movements reach the target 
   if (objAttr != json[attr]) {
   bStop = false;
   }
   if (attr == "opacity") {
   obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')';
   obj.style.opacity = (objAttr + iSpeed) / 100;
   } else {
   obj.style[attr] = objAttr + iSpeed + 'px';//  Need again . Change the form of the attribute name to []
   }
  }
  if (bStop) { //  Indicates that all movements have reached the target value 
   clearInterval(obj.timer);
   if (fn) {
   fn();
   }
  }
  }, 10);
 }


 /**
  *  Get interline / Inline / External style, cannot be set 
  * @param obj
  * @param attr
  */
 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, false)[attr];
  }
 }

Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel