How to use CSS to achieve a simple image switching effect

CSS is one of the most important technologies in front-end development and can achieve various styles and animations. Among them, image switching is also a common requirement, such as website carousels, slides, etc. In this article, I will introduce how to use CSS to achieve a simple image switching effect.

1. HTML structure

First, we need to add images to the web page and assign them different IDs or classes. The following is a sample code:

<div class="slider">
  <img id="img1" src="image1.jpg" alt="Image 1">
  <img id="img2" src="image2.jpg" alt="Image 2">
  <img id="img3" src="image3.jpg" alt="Image 3">
</div>

As you can see, we used class="slider" in the <div> tag for convenience. CSS selectors to operate on the elements within them. The ID and src attributes in the <img> tag specify the unique identifier and source path of the image respectively.

2. CSS Style

Next, we need to set the CSS style for each image and use the CSS selector to switch them. The following is a sample code:

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

First, we set some basic styles for the <div> tag of class="slider", including height, width and hide overflow content. Next, we set styles for each image: absolute positioning, transparency of 0, transition effects, etc. Among them, the .slider img:first-child selector indicates that the first image is active, that is, displayed on the web page.

3. JS interaction

Finally, we need to add JavaScript interaction to the web page to achieve image switching. The following is a sample code:

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

The purpose of this code is to define a variable currentImg to represent the current picture, and a variable totalImg to represent the total number of pictures. Then, use the setInterval function to call the changeImg function at a certain interval (5 seconds in this case). In this function, first update the current image and determine whether the total number is exceeded, and then use the CSS selector to remove the active class name of all images and add the class name to the current image. Finally, call the changeImg function when the web page is loading to start image switching.

4. Effect display

After the above three steps, we can achieve a simple image switching effect. A demonstration effect is provided here for reference.

HTML code:

<div class="slider">
  <img id="img1" src="https://source.unsplash.com/random/600x400" alt="Image 1">
  <img id="img2" src="https://source.unsplash.com/random/600x401" alt="Image 2">
  <img id="img3" src="https://source.unsplash.com/random/600x402" alt="Image 3">
</div>

CSS code:

.slider {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

JS code:

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

Effect display: https://codepen.io/fangzhou/pen /oQJNEN

To sum up, it is not difficult to use CSS to achieve image switching effects. You only need to master some basic knowledge and skills. Of course, actual development may involve more complex situations, which require continuous learning and practice.

The above is the detailed content of How to use CSS to achieve a simple image switching effect. For more information, please follow other related articles on the PHP Chinese website!