How to use CSS to achieve a simple image switching effect-Front-end Q&A-php.cn

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:

Copy after login

As you can see, we usedclass="slider"in the

tag for convenience. CSS selectors to operate on the elements within them. The ID andsrcattributes in thetag 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; }

Copy after login

First, we set some basic styles for the

tag ofclass="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-childselector 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(); });

Copy after login

The purpose of this code is to define a variablecurrentImgto represent the current picture, and a variabletotalImgto represent the total number of pictures. Then, use thesetIntervalfunction to call thechangeImgfunction 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 theactiveclass name of all images and add the class name to the current image. Finally, call thechangeImgfunction 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:

Copy after login

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; }

Copy after login

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(); });

Copy after login

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!

source：php.cn

Previous article：What are the characteristics of css Next article：How to beautify and customize scroll bars with css

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn