Native JavaScript to achieve the effect of carousel

This article shares the specific code for JavaScript to achieve the effect of the carousel for your reference. The specific content is as follows

1. Function:

1. Automatically switch to the next slideshow every 2.5 seconds;

2. The bottom button switches the corresponding carousel image;

3. Move the mouse in to pause the automatic switching, move it out to start;

4. Move the mouse, and the left and right switch buttons will appear, and you can switch the carousel left and right.

2. Effect (GIF):

3. Code:

Structure layer (HTML)

<div class="box">
 <img src="./image/banner1.jpg" />
 <div class="arrows left">
  <img src="./image/left.png" />
 </div>
 <div class="arrows right">
  <img src="./image/right.png" />
 </div>
 <ul class="buttom"></ul>
</div>

Presentation layer (CSS)

.box {
 width: 300px;
 height: 200px;
 background: #333;
 border-radius: 5px;
 overflow: hidden;
 margin: 0 auto;
 font-size: 0;
 position: relative;
 display: flex;
 align-items: center;
}
 
.box:hover .arrows{
 display: block;
}
 
.box img{
 width: 100%;
}
 
.arrows {
 width: 20px;
 text-align: center;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 9;
 font-size: 30px;
 display: none;
}
 
.left{
 left: 10px;
}
 
.right{
 right: 10px;
}
 
.button{
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
}
 
.button li {
 width: 20px;
 height: 5px;
 border-radius: 1px;
 background: #fff;
 margin: 0 2px;
}
 
.active {
 background: red !important;
}

Behavior layer (JavaScript)

let count = 0 // Create the current carousel index // Get the DOM element let box = document.querySelector('.box')
let img = document.querySelector('img')
let left = document.querySelector('.left')
let right = document.querySelector('.right')
let ul = document.querySelector('ul')
 
// Carousel image array let imgArr = [
 './image/banner1.jpg',
 './image/banner2.jpg',
 './image/banner3.jpg',
 './image/banner4.jpg'
]
 
// Traverse the image array and add the corresponding bottom switch li tag imgArr.forEach(() => {
 let li = document.createElement('li')
 ul.appendChild(li)
})
 
let lis = document.querySelectorAll('li') // Get all li tags lis[0].className = 'active' // Add selected state to the first li tag // Switch the slideshow function switchImg (type) {
 return function() {
  if(type == 1) {
   if(count - 1 < 0) {
    count = imgArr.length - 1
   } else {
    count += -1
   }
  } else {
   if(count + 1 >= imgArr.length) {
    count = 0
   } else {
    count += 1
   }
  }
  img.src = imgArr[count]
  lis.forEach((v,i) => {
   lis[i].className = ''
   if(i == count) {
    lis[i].className = 'active'
   }
  })
 }
}
 
left.addEventListener('click', switchImg(1)) // Previous slideshow right.addEventListener('click', switchImg(2)) // Next slideshow // Click the bottom li tag to switch slideshow lis.forEach((value,index) => {
 lis[index].addEventListener('click', () => {
  lis.forEach((v,i) => {
   lis[i].className = ''
  })
  count = index
  img.src = imgArr[count]
  lis[count].className = 'active'
 })
})
// Create a timer to automatically switch to the next slide every 2.5 seconds let swiper = setInterval(() => {
 right.click()
},2500)
//Mouse enters and pauses automatic switching box.onmouseenter = () => {
 clearInterval(swiper)
}
//Mouse out to start automatic switching box.onmouseleave = () => {
 swiper = setInterval(() => {
  right.click()
 },1500)
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements multiple tab switching carousel
js to achieve a simple carousel effect
JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)
JavaScript to implement simple carousel chart most complete code analysis (ES5)
js to implement the complete code of the carousel
Sample code for implementing carousel with native js
js to achieve the effect of supporting mobile phone sliding switch carousel picture example
JS carousel diagram implementation simple code
js to achieve click left and right buttons to play pictures
JavaScript implementation of carousel example

<<: Detailed explanation of the difference between Mysql temporary table and partition table

>>: Linux installation MongoDB startup and common problem solving