How to achieve advertising image carousel effect with JavaScript

With the development and popularity of Internet advertising, website advertising space has become one of the important entrances to various websites. How to achieve a beautiful and practical advertising carousel effect on the website has also become an important issue that website developers pay attention to. In this article, we will introduce a JavaScript-based implementation method of advertising image carousel.

1. Basic principles of carousel

Image carousel refers to automatically or manually switching images on a web page within a certain time interval, thereby looping through multiple images to achieve display Multiple information purposes. To implement this function, JavaScript needs to be operated.

JavaScript itself is an event-based language that triggers code execution through various events on the page that interact with users (such as mouse clicks, mouse hovers, keyboard events, etc.). In carousel images, we can associate image switching buttons, image switching time intervals, transition effects between images, etc. with JavaScript events to achieve automatic scrolling and manual operation of images.

2. Technical details of carousel implementation

Based on the above basic principles of carousel, the specific implementation technical details are introduced below.

1. Layout design

First design a container element, with multiple image elements nested inside the container element. Image elements use the same style and have fixed width and height, so that there will be no problems such as misalignment due to different sizes when the images are rotated. Use absolute positioning in container elements so that individual image elements appear in the same position.

2. Picture switching

The function of automatic and manual switching of pictures is realized through JavaScript code. For automatic switching, you need to consider using a timer, while manual switching can be achieved using mouse hover and mouse click events.

3. Focus indicator

Design a focus indicator bar suspended at the bottom so that the focus of the current picture can be clearly expressed. The focus indicator bar usually consists of a number of small dots, and the dots corresponding to the current image are distinguished (for example, by changing color). When implemented at the JavaScript code level, the small dots corresponding to the image can be changed accordingly based on the number or index of each image.

4. Transition effect

In order to make the image carousel effect more smooth and natural, you need to use transition effect. Transition effects can show corresponding display effects when transitioning from one picture to the next, such as fade in and fade out, rotation and zoom, etc. The transition effect of CSS3 can be used during the implementation process, or JavaScript can be used to achieve the transition effect.

3. Carousel implementation code example

The following provides a JavaScript code example to demonstrate how to use JavaScript to achieve a carousel effect one by one. Through this example, you can see that image carousel is not difficult and only requires some basic knowledge of HTML, CSS and JavaScript to implement.

The HTML code is as follows:

<div id="img_container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>
<div id="indicators"></div>

The div#img_container is the image container, and each img tag is nested in the container in turn;div#indicators is an indicator container that contains multiple indicator elements.

CSS code is as follows:

#img_container{
  position:relative;
  overflow:hidden;
  height:400px;
  width:600px;
}

#img_container img{
  position:absolute;
  width:600px;
  height:400px;
  z-index:1;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

#img_container img.active{
  opacity:1;
  z-index:2;
}

#indicators{
  position:absolute;
  width:100%;
  bottom:20px;
  text-align:center;
}

.indicator{
  display:inline-block;
  height:10px;
  width:10px;
  border-radius:50%;
  margin:0 10px;
}

.indicator.active{
  background-color:red;
}

#img_container uses the position:relative attribute in CSS to define the elements inside the image container Use relative position for layout; opacity attribute sets transparency, transition attribute is transition attribute; #indicators is positioned at the bottom and centered using centered text alignment. .indicator is the indicator style.

The JavaScript code is as follows:

const container = document.getElementById('img_container');
const images = container.querySelectorAll('img');
const indicators = document.getElementById('indicators');
const dots = [];

let currentImgIndex = 0;
let interval;

images[currentImgIndex].classList.add('active');

for(let i = 0; i < images.length; i++){
  const dot = document.createElement(&#39;span&#39;);
  dot.className = "indicator";
  dot.addEventListener(&#39;click&#39;, () => {
    clearInterval(interval);
    currentImgIndex = i;
    updateImages();
    autoNext();
  });
  indicators.appendChild(dot);
  dots.push(dot);
}

function updateImages(){
  images.forEach(image => image.classList.remove('active'));
  dots.forEach(dot => dot.classList.remove('active'));
  images[currentImgIndex].classList.add('active');
  dots[currentImgIndex].classList.add('active');
}

function autoNext(){
  clearInterval(interval);
  interval = setInterval(() => {
    currentImgIndex++;
    if(currentImgIndex >= images.length){
      currentImgIndex = 0;
    }
    updateImages();
  }, 3000);
}

autoNext();

In the JavaScript code, first obtain the container element and the internal image element, and set the index value of the current image (currentImgIndex) and TimersetInterval to control the effect of image carousel. At the same time, use updateImages() to update the activation status of the current image and focus indicator, and use autoNext() to achieve the automatic carousel effect.

4. Summary

This article introduces the basic principles and implementation technical details of using JavaScript to implement advertising image rotation, including image switching, focus indication, transition effects, etc. The code examples introduced can also be used as a reference in actual applications to better implement the web page ad rotation function. Of course, as JavaScript technology continues to be updated, this implementation may also change.

The above is the detailed content of How to achieve advertising image carousel effect with JavaScript. For more information, please follow other related articles on the PHP Chinese website!