如何使用 jQuery 设计图像滑块？

一个幻灯片容器，循环浏览网页上的图像列表。下面的文章将指导您使用 HTML、CSS 和 jQuery 实现一个图像滑块。 jQuery 图像滑块包含使用上一个和下一个图标运行它们的图像。上一个和下一个箭头用于在图像上的鼠标悬停事件上来回遍历。下面的示例代码是通过使用 HTML、CSS 和 jQuery 以一种简单灵活的方式在轮播中显示图像的方式实现的。我们将分两部分完成任务，首先我们将通过 HTML 创建结构，通过 CSS 设计结构，并通过 jQuery 进行交互。

创建结构：在本节中，我们将创建图像滑块的结构。

• HTML 代码： HTML 用于创建图像滑块的结构。

  
  
     
  
      
        
      
        
       
  
     
  
      
          
  
              GeeksforGeeks
          
            
          
              How to code Image
              Slider using jQuery
          
            
          
  
  
      
         
      
      
  
          
  
              
  1
              
          
          
  
              
  2
              
          
          
  
              
  3
              
          
     
          
          
              
          
          
              
          
      
      
  
     
      
  
          
          
          
          
          
          
      
  
     
  
  

设计结构：这里我们将使用CSS完成图像滑块的设计部分，并使用jQuery使滑块具有交互性。

• CSS 代码：根据所有元素的标签和类来设计结构。

• jQuery 代码： jQuery 用于设计交互式滑块。

      var slideIndex = 1;
      displaySlide(slideIndex);
     
      function moveSlides(n) {
          displaySlide(slideIndex += n);
      }
     
      function activeSlide(n) {
          displaySlide(slideIndex = n);
      }
     
      /* Main function */
      function displaySlide(n) {
          var i;
          var totalslides = 
              document.getElementsByClassName("slide");
          var totaldots = 
              document.getElementsByClassName("footerdot");
            
          if (n > totalslides.length) {
              slideIndex = 1;
          }
            
          if (n < 1) {
              slideIndex = totalslides.length;
          }
          for (i = 0; i < totalslides.length; i++) {
              totalslides[i].style.display = "none";
          }
          for (i = 0; i < totaldots.length; i++) {
              totaldots[i].className = 
              totaldots[i].className.replace(" active", "");
          }
          totalslides[slideIndex - 1].style.display = "block";
          totaldots[slideIndex - 1].className += " active";
      }

完整的解决方案：在本节中，我们将把上述部分组合在一起，这将是一个图像滑块。

   

    
        How to Design Image
        Slider using jQuery ?
    
      
    
      
     
      
    
        img {
            width: 100%;
        }
        .height {
            height: 10px;
        }
           
        /* Image-container design */
        .image-container {
            max-width: 800px;
            position: relative;
            margin: auto;
        }
           
        .next {
            right: 0;
        }
           
        /* Next and previous icon design */
        .previous,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            padding: 10px;
            margin-top: -25px;
        }
           
        /* caption decorate */
        .captionText {
            color: #000000;
            font-size: 14px;
            position: absolute;
            padding: 12px 12px;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }
           
         /* Slider image number */
        .slideNumber {
            background-color: #5574C5;
            color: white;
            border-radius: 25px;
            right: 0;
            opacity: .5;
            margin: 5px;
            width: 30px;
            height: 30px;
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            position: absolute;
        }
        .fa {
            font-size: 32px;
        }
           
        .fa:hover {
            transform: rotate(360deg);
            transition: 1s;
            color: white;
        }
           
        .footerdot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbbbbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.5s ease;
        }
           
        .active,
        .footerdot:hover {
            background-color: black;
        }
    

   

    
        
            GeeksforGeeks
        
          
        
            How to code Image
            Slider using jQuery
        
          
        
    
       
    
    
        
            1
            
        
        
            2
            
        
        
            3
            
        
   
        
        
            
        
        
            
        
    
    
   
    
        
        
        
        
        
        
    
      
    
        var slideIndex = 1;
        displaySlide(slideIndex);
   
        function moveSlides(n) {
            displaySlide(slideIndex += n);
        }
   
        function activeSlide(n) {
            displaySlide(slideIndex = n);
        }
   
        /* Main function */
        function displaySlide(n) {
            var i;
            var totalslides = 
                document.getElementsByClassName("slide");
              
            var totaldots = 
                document.getElementsByClassName("footerdot");
              
            if (n > totalslides.length) {
                slideIndex = 1;
            }
            if (n < 1) {
                slideIndex = totalslides.length;
            }
            for (i = 0; i < totalslides.length; i++) {
                totalslides[i].style.display = "none";
            }
            for (i = 0; i < totaldots.length; i++) {
                totaldots[i].className = 
                totaldots[i].className.replace(" active", "");
            }
            totalslides[slideIndex - 1].style.display = "block";
            totaldots[slideIndex - 1].className += " active";
        }
    

   

输出：