JavaScript implements automatic picture playback

Nowadays, with the continuous development of Internet technology, web design has become a very important industry. As a very important element, pictures are often used in page design to beautify the page, enhance the effect of information transmission, and attract the user's attention. Presenting some dynamic elements on the page can not only enrich the content of the page, but also provide users with a more intuitive sensory effect and a better user experience when browsing. This article will introduce how JavaScript implements automatic image playback.

1. Principle of automatic carousel

Picture carousel, as the name suggests, allows multiple pictures to be played and switched automatically. The principle of automatic carousel is realized with the help of JavaScript timer: when the number of pages of the carousel is determined, the setInterval() function is used to switch pictures regularly; if the carousel is infinite, setTimeout() is used to implement recursive calls to achieve the carousel effect. .

2. HTML structure

To implement automatic carousel, you need to create a looping container and image in HTML, as follows:

<div class="carousel-container">
  <img src="images/pic1.png" alt="image 1">
  <img src="images/pic2.png" alt="image 2">
  <img src="images/pic3.png" alt="image 3">
</div>

3. CSS style

Set the style of the carousel container as follows:

.carousel-container{
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}
.carousel-container img{
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.6s ease-in-out;
}
.carousel-container img.active{
  opacity: 1; 
}

4. Implement carousel with JavaScript

1. Get the image and container

var carouselContainer = document.querySelector('.carousel-container');
var carouselImgs = carouselContainer.querySelectorAll('img');

2. Initialization Carousel

Before starting the carousel, you can add a class name "active" to the first picture, and set a counter index to represent the current carousel picture, so that you can switch to the next one in the next step. picture.

var index = 0;
carouselImgs[index].classList.add('active');

3. Set the timer

During the carousel process, you need to switch a picture at a certain time. Here are two implementation methods: infinite carousel and Limited rotation. The difference lies in whether to restart the traversal from the beginning after all the image traversals are completed.

Infinite carousel:

setInterval(function(){
  index++;
  if(index >= carouselImgs.length){
    index = 0;
  }
  carouselImgs.forEach(function(img){
    img.classList.remove('active');
  });
  carouselImgs[index].classList.add('active');
}, 3000);

Limited carousel:

var timer = setInterval(function(){
  index++;
  if(index >= carouselImgs.length){
    clearInterval(timer);
    return;
  }
  carouselImgs.forEach(function(img){
    img.classList.remove('active');
  });
  carouselImgs[index].classList.add('active');
}, 3000);

As you can see here, by setting the counter index, you can ensure that the corresponding position is traversed each time, and at the same time We set a timer to rotate the next image every 3 seconds.

4. Add event listener

Some users may want to click on the picture to jump to the relevant page. In this case, we need to add event listener to the picture.

carouselImgs.forEach(function(img){
  img.addEventListener('click', function(e){
    var targetURL = e.target.getAttribute('data-href');
    if(targetURL){
      window.location.href=targetURL;
    }
  });
});

Here, we monitor the user's click behavior through event monitoring, and obtain the link corresponding to the image through the "getAttribute()" method, so that clicking on the image jumps to the target page.

5. Summary

After the above steps, we can successfully achieve the effect of automatic image rotation. However, it should be noted that carousel images cannot be used on all pages. Only appropriate scenarios and appropriate designs can produce good results. The automatic image carousel effect achieved through the above method also has certain limitations. When there are multiple carousel images on the page at the same time, conflicts may exist and affect the execution of the program. Therefore, we need to make reasonable adjustments and uses in practical applications to produce the best results.

The above is the detailed content of JavaScript implements automatic picture playback. For more information, please follow other related articles on the PHP Chinese website!