How to write javascript carousel image js

The implementation of JavaScript carousel chart can use native JavaScript code or reference some mature third-party libraries (such as jQuery, etc.).

Let’s take the native JavaScript code as an example to introduce how to implement a JavaScript carousel chart.

Step one: HTML structure

First, we need to define the structure of the carousel in HTML, including image containers, left and right arrows, navigation buttons, etc. For example:

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
  <div class="slider-dots">
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

Among them, slider-container is the container of the carousel image, slider-wrapper is the image container, slider-prev and slider-next is the left and right arrows, slider-dots and slider-dot are navigation buttons.

Step 2: CSS style

Next, we need to set the style for the carousel image, including the width, height, position, etc. of the container, the layout and size of the image, etc., and the navigation button style etc.

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  width: 2400px;
  height: 400px;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  float: left;
  width: 800px;
  height: 400px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
  transform: rotate(180deg);
}

.slider-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  display: inline-block;
  margin: 0 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #f90;
}

The above are some simple example styles. Of course, the specific styles can be adjusted according to needs.

Step Three: JavaScript Code

Now start writing JavaScript code to achieve the effect of the carousel chart. We first need to get the reference of each element, for example:

var container = document.querySelector('.slider-container');
var wrapper = document.querySelector('.slider-wrapper');
var prev = document.querySelector('.slider-prev');
var next = document.querySelector('.slider-next');
var dots = document.querySelectorAll('.slider-dot');

Then, we need to set some parameters and variables, for example:

var index = 0;  // 当前图片的索引
var interval = 3000;  // 切换时间间隔（3秒）
var timer = null;  // 定时器

Next, we need to write some functions to implement the carousel chart Basic functions:

Switch pictures:

function changeImage() {
  wrapper.style.transform = 'translateX(-' + index * 800 + 'px)';
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove(&#39;active&#39;);
  }
  dots[index].classList.add(&#39;active&#39;);
}

Automatic switching:

function autoPlay() {
  timer = setInterval(function() {
    index++;
    if (index >= dots.length) {
      index = 0;
    }
    changeImage();
  }, interval);
}

Stop automatic switching:

function stopAutoPlay() {
  clearInterval(timer);
}

Handle the click event of the navigation button:

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener(&#39;click&#39;, function() {
    index = this.getAttribute(&#39;data-index&#39;);
    changeImage();
    stopAutoPlay();
  });
}

Handle the click events of the left and right arrows:

prev.addEventListener('click', function() {
  index--;
  if (index < 0) {
    index = dots.length - 1;
  }
  changeImage();
  stopAutoPlay();
});

next.addEventListener(&#39;click&#39;, function() {
  index++;
  if (index >= dots.length) {
    index = 0;
  }
  changeImage();
  stopAutoPlay();
});

Finally, we start the automatic switching after the page is loaded:

window.addEventListener('load', function() {
  autoPlay();
});

To sum up, this is a simple JavaScript wheel Implementation steps of broadcasting pictures. Of course, more functions can be expanded according to needs, such as fade-in and fade-out effects, lazy loading, responsive layout, etc.

The above is the detailed content of How to write javascript carousel image js. For more information, please follow other related articles on the PHP Chinese website!