How to use JavaScript to achieve the up and down sliding switching effect of images while adding zoom and fade animations?-JS Tutorial-php.cn

How to use JavaScript to achieve the up and down sliding switching effect of images while adding zoom and fade animations?

PHPz

Release： 2023-10-20 17:15:11

Original

1063 people have browsed it

JavaScript 如何实现图片的上下滑动切换效果同时加入缩放和淡入淡出动画？

JavaScript How to achieve the up and down sliding switching effect of images while adding zoom and fade animations?

In web design, image switching effects are often used to improve user experience. Among these switching effects, sliding up and down, zooming and fading animations are relatively common and attractive. This article will introduce how to use JavaScript to achieve the combination of these three animation effects.

First, we need to use HTML to build a basic web page structure, which contains the picture elements to be displayed. The following is an example HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>图片切换效果</title>
  <style>
    .container {
      position: relative;
      width: 500px;
      height: 300px;
      overflow: hidden;
    }
    
    .slide {
      position: absolute;
      display: none;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="slide" src="image1.jpg">
    <img class="slide" src="image2.jpg">
    <img class="slide" src="image3.jpg">
  </div>
  
  <script src="main.js"></script>
</body>
</html>

Copy after login

In the above code, we use a container div containing three image elements, each of which has the class "slide". Among them, the container class defines the style of the container, and the slide class defines the style of the picture element. By setting the overflow attribute of the container to hidden, the hiding effect of the part of the picture element beyond the container is achieved.

Next, we need to use JavaScript to achieve the up and down sliding switching, scaling and fade-in and fade-out animation effects of the image. The following is an example JavaScript code:

window.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.slide');
  var currentIndex = 0;
  
  function showSlide(index) {
    // 隐藏当前显示的图片
    slides[currentIndex].style.display = 'none';
    
    // 显示指定索引的图片
    slides[index].style.display = 'block';
    
    // 设置当前索引
    currentIndex = index;
  }
  
  function animateSlide(index) {
    var slide = slides[index];
    
    // 先缩小图片
    slide.style.transform = 'scale(0)';
    slide.style.opacity = 0;
    
    // 等缩放动画完成后，再展示出来
    setTimeout(function() {
      slide.style.transition = 'transform 0.5s, opacity 0.5s';
      slide.style.transform = 'scale(1)';
      slide.style.opacity = 1;
    }, 100);
  }
  
  function nextSlide() {
    var nextIndex = currentIndex + 1;
    
    if (nextIndex >= slides.length) {
      nextIndex = 0;
    }
    
    showSlide(nextIndex);
    animateSlide(nextIndex);
  }
  
  // 每隔3秒切换到下一张图片
  setInterval(nextSlide, 3000);
});

Copy after login

In the above code, we first obtain all image elements with slide class through document.querySelectorAll('.slide') and save them in the slides variable. currentIndex is used to record the currently displayed image index.

Then the showSlide function is defined to display the picture at the specified index. In the function, we set the display attribute of the currently displayed image element to 'none' to hide it, and set the display attribute of the image element at the specified index to 'block' to display it.

The animateSlide function is used to achieve the zoom and fade effects of images. In the function, we first set the transform and opacity properties of the image element to a reduced state and a transparency of 0. Then delay 0.1 seconds through the setTimeout function, and set the transition, transform and opacity attributes of the image element to the state of magnification and transparency to 1. Due to the setting of the transition attribute, there will be a transition effect during the fade-in and fade-out process.

Finally, the picture switching is realized through the nextSlide function. In the function, we first calculate the index of the next picture, display it and add animation effects through the showSlide function and animateSlide function respectively.

In the DOMContentLoaded event of the window object, we perform the above operations. And set the timer to automatically switch to the next picture every 3 seconds through the setInterval function.

Combined with the above HTML and JavaScript code, we have achieved the up and down sliding switching effect of the image, and added the zoom and fade animation effects. In this way, the switching of pictures is made more vivid and attractive, providing users with a better experience in web browsing. Note that the image path in the example needs to be adjusted according to the actual situation.

The above is the detailed content of How to use JavaScript to achieve the up and down sliding switching effect of images while adding zoom and fade animations?. For more information, please follow other related articles on the PHP Chinese website!