当用户使用 JavaScript 滚动时如何动态更改图像？

我们将把这个功能添加到我们的网页中，这样每当用户向上滚动或向下滚动图像时，图像就会发生变化。我们只使用了 3 张图像，但它可以轻松扩展为多个图像。
我们将图像保持在彼此之上，这确保一次只能看到一张图像。当我们滚动时，我们减少当前图像的 z 坐标并增加新图像的 z 坐标。通过这样做，新图像覆盖了旧图像，它位于所有图像的顶部并变得可见。

• HTML 代码：用于创建包含图像的基本结构。

html

 

    
    

 

GeeksforGeeks
A Computer Science Portal for Geeks
    

        
        
        
    

 

• CSS 代码： CSS 用于设计结构。位置属性是这里最重要的东西。它将使所有图像显示在彼此之上。

html

• Javascript 代码：在本节中，我们将添加 JavaScript 代码来执行图像的滚动。

javascript

    window.onload = function() {
  
        // Index of current image
        // which is on display
        var imageIndex = 0;
  
        // Object array of all the
        // images of class test
        var images =
            document.getElementsByClassName('test');
  
        // This tells us if mouse if over
        // image or not, We only change
        // image if mouse if over it
        var isMouseOverImage = false;
  
        // Object of parent element
        // containing all images
        var scrollImages =
            document.getElementById('scroll-image');
  
        // Stores the current scoll co-ordinates
        // so that the window don't scroll down
        // while scrolling the images
        var x, y;
  
        // This function sets the scroll to x, y
        function noScroll() {
            window.scrollTo(x, y);
        }
  
        // The following event id fired once when
        // We hover mouse over the images
        scrollImages.addEventListener(
                "mouseenter", function() {
  
            // We store the current page
            // offset to x,y
            x = window.pageXOffset;
            y = window.pageYOffset;
  
            // We add the following event to
            // window object, so if we scroll
            // down after mouse is over the
            // image we can avoid scrolling
            // the window
            window.addEventListener("scroll", noScroll);
             
            // We set isMouseOverImage to
            // true, this means Mouse is
            // now over the image
            isMouseOverImage = true;
        });
  
        // The following function is fired
        // when mouse is no longer over
        // the images
        scrollImages.addEventListener(
                "mouseleave", function() {
  
            // We set isMouseOverImage to
            // false, this means mouse is
            // not over the image
            isMouseOverImage = false;
  
            // We remove the event we previously
            // added because we are no longer
            // over the image, the scroll will
            // now scroll the window
            window.removeEventListener(
                        "scroll", noScroll);
        });
  
        // The following function is called
        // when we move mouse wheel over
        // the images
        scrollImages.addEventListener(
                    "wheel", function(e) {
                             
            // We check if we are over
            // image or not
            if (isMouseOverImage) {
                var nextImageIndex;
  
                // The following condition
                // finds the next image
                // index depending if we
                // scroll up or scroll down
                if (e.deltaY > 0)
                    nextImageIndex = (imageIndex + 1)
                                     % images.length;
                else
                    nextImageIndex =
                            (imageIndex - 1
                            + images.length)
                            % images.length;
  
                // We set the z index of current
                // image to 0
                images[imageIndex].style.zIndex = "0";
                     
                // We set the z index of next
                // image to 1, this makes
                // The new image appear on top
                // of old image
                images[nextImageIndex].style.zIndex = "1";
                imageIndex = nextImageIndex;
            }
        });
    }

最终解决方案：在本节中，我们将结合以上三节。

JavaScript

  

    
    
        Change image dynamically
        when user scrolls
    
     
    
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        img {
            position: absolute;
            left: 300px;
        }
    

  

    GeeksforGeeks
     
    A Computer Science Portal for Geeks
     
    
        
        
        
    
     
    
        window.onload = function() {
      
            // Index of current image
            // which is on display
            var imageIndex = 0;
      
            // Object array of all the
            // images of class test
            var images =
                document.getElementsByClassName('test');
      
            // This tells us if mouse if over
            // image or not, We only change
            // image if mouse if over it
            var isMouseOverImage = false;
      
            // Object of parent element
            // containing all images
            var scrollImages =
                document.getElementById('scroll-image');
      
            // Stores the current scoll co-ordinates
            // so that the window don't scroll down
            // while scrolling the images
            var x, y;
      
            // This function sets the scroll to x, y
            function noScroll() {
                window.scrollTo(x, y);
            }
      
            // The following event id fired once when
            // We hover mouse over the images
            scrollImages.addEventListener(
                    "mouseenter", function() {
      
                // We store the current page
                // offset to x,y
                x = window.pageXOffset;
                y = window.pageYOffset;
      
                // We add the following event to
                // window object, so if we scroll
                // down after mouse is over the
                // image we can avoid scrolling
                // the window
                window.addEventListener("scroll", noScroll);
                 
                // We set isMouseOverImage to
                // true, this means Mouse is
                // now over the image
                isMouseOverImage = true;
            });
      
            // The following function is fired
            // when mouse is no longer over
            // the images
            scrollImages.addEventListener(
                    "mouseleave", function() {
      
                // We set isMouseOverImage to
                // false, this means mouse is
                // not over the image
                isMouseOverImage = false;
      
                // We remove the event we previously
                // added because we are no longer
                // over the image, the scroll will
                // now scroll the window
                window.removeEventListener(
                            "scroll", noScroll);
            });
      
            // The following function is called
            // when we move mouse wheel over
            // the images
            scrollImages.addEventListener(
                        "wheel", function(e) {
                                 
                // We check if we are over
                // image or not
                if (isMouseOverImage) {
                    var nextImageIndex;
      
                    // The following condition
                    // finds the next image
                    // index depending if we
                    // scroll up or scroll down
                    if (e.deltaY > 0)
                        nextImageIndex = (imageIndex + 1)
                                         % images.length;
                    else
                        nextImageIndex =
                                (imageIndex - 1
                                + images.length)
                                % images.length;
      
                    // We set the z index of current
                    // image to 0
                    images[imageIndex].style.zIndex = "0";
                         
                    // We set the z index of next
                    // image to 1, this makes
                    // The new image appear on top
                    // of old image
                    images[nextImageIndex].style.zIndex = "1";
                    imageIndex = nextImageIndex;
                }
            });
        }
    

  

输出：

注意：上面的代码只有在鼠标悬停在图像上时才会改变图像。