如何使用 JavaScript 创建评论轮播？

在本文中，我们使用 JavaScript 创建了一个评论轮播。我们还使用了基本的 HTMM 和 CSS 来设计样式。轮播基本上是一种幻灯片，用于以循环方式显示图像、文本或两者。评论轮播用于显示评论。

方法：

• 在 body 标签中，创建一个嵌套的 div 标签，类名包含审阅者图片、姓名和文本。
• 添加上一个和下一个按钮以分别检查上一个和下一个评论。
• 对于样式，在样式标签中添加一些 CSS 属性，如对齐、字体大小、填充、边距等。
• 在脚本标签中使用 JavaScript 创建一个函数，以便一次只显示一条评论。

示例：使用上述方法创建评论轮播。

HTML 代码：与前两步一样，我们将在 body 标签中创建一个嵌套的div标签和两个按钮。

index.html

    

        
        
GeeksforGeeks
  
        

            Let's learn to create a review 
            carousel using JavaScript.
        
    
  
    

        
        
Geek Here
  
        

            Very useful site to learn cool 
            stuff. Improve your skills
        
    
  
    

        
        
Hello there!
  
        

            Have a nice day, Please visit 
            us again. Nice to meet you.
        
    
  
    

        
            PREV
        
          
        
            NEXT
        
    

注意：在按钮标签中，我们指定了一个属性 onclick。 onclick事件属性在用户单击按钮时起作用。单击按钮时，它将执行该函数。

CSS 代码：对于样式，我们使用了 CSS 属性。

样式文件

.review {
    background: rgb(145, 226, 188);
    height: auto;
    width: 270px;
    border-radius: 15px;
    margin: auto;
    padding: 10px;
    margin-top: 30px;
    box-shadow: 5px 5px 5px #32917d;
    align-items: center;
}
  
.review__items {
    align-items: center;
    justify-content: space-evenly;
    width: 250px;
    padding: 10px;
    align-items: center;
}
  
.review__items img {
    height: 250px;
    width: 250px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
}
  
.review__items h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
}
  
.review__items p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
}
  
.review__button {
    text-align: center;
    padding: 10px;
}
  
.review__button button {
    color: rgb(192, 229, 192);
    background: green;
    font-weight: bold;
}
  
.review__items {
    display: none;
}

注意：我们也可以为样式创建另一个文件，或者我们可以将它们添加到样式标签下的同一个 HTML 文件中。

现在，为了一次只显示一条评论，我们将在 JavaScript 中创建一些函数。

Carousel函数：该函数借助 getElementsByClassName() 方法获取使用指定类名作为对象的所有元素。这些对象可以通过元素的索引来访问。这个函数接收一个参数，它是它将显示的元素的索引。

function carousel(review) {
    let reviews = document.getElementsByClassName("review__items");

    if(review>=reviews.length){
        review=0;
        rev=0;
    }
    if(review<0){
        review=reviews.length-1;
        rev=reviews.length-1;
    }
    for (let i = 0; i < reviews.length; i++) {
      reviews[i].style.display = "none";
    }
    reviews[review].style.display="block";
}

要显示指定的索引，首先，它将通过使用简单的 for 循环将其显示设置为无来隐藏所有评论，对于特定索引，它将通过将其显示设置为阻止来显示信息。

注意：条件语句负责轮播的循环方式，如果参数为负则将参数设置为最后一个索引，如果参数大于或等于最后一个索引则将参数设置为第一个指数。

perviousReview函数：当点击前一个按钮时，将执行此函数，将变量减 1，然后将其传递给轮播函数。

function previousReview() {
    rev = rev - 1;
    carousel(rev);
}

nextReview函数：该函数将在单击下一步按钮时执行，将变量增加 1，然后将其传递给轮播函数。

function nextReview() {
    rev = rev + 1;
    carousel(rev);
}

完整代码：

HTML

  

    Review Carousel
  
    
        .review {
            background: rgb(145, 226, 188);
            height: auto;
            width: 270px;
            border-radius: 15px;
            margin: auto;
            padding: 10px;
            margin-top: 30px;
            box-shadow: 5px 5px 5px #32917d;
            align-items: center;
        }
          
        .review__items {
            align-items: center;
            justify-content: space-evenly;
            width: 250px;
            padding: 10px;
            align-items: center;
        }
          
        .review__items img {
            height: 250px;
            width: 250px;
            border-radius: 5px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 15px;
        }
          
        .review__items h1 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 20px;
        }
          
        .review__items p {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 14px;
        }
          
        .review__button {
            text-align: center;
            padding: 10px;
        }
          
        .review__button button {
            color: rgb(192, 229, 192);
            background: green;
            font-weight: bold;
        }
          
        .review__items {
            display: none;
        }
    

  

    
        
            
            GeeksforGeeks
            
                Let's learn to create a review 
                carousel using JavaScript.
            
  
        
  
        
            
            Geek Here
            
                Very useful site to learn cool 
                stuff. Improve your skills.
            
  
        
  
        
            
            Hello there!
            
                Have a nice day, Please visit 
                us again. Nice to meet you
            
        
  
        
            
                PREV
            
              
            
                NEXT
            
        
    
  
    
        let rev = 0;
        carousel(rev);
  
        function previousReview() {
            rev = rev - 1;
            carousel(rev);
        }
  
        function nextReview() {
            rev = rev + 1;
            carousel(rev);
        }
  
        function carousel(review) {
            let reviews = document
                .getElementsByClassName("review__items");
  
            if (review >= reviews.length) {
                review = 0;
                rev = 0;
            }
            if (review < 0) {
                review = reviews.length - 1;
                rev = reviews.length - 1;
            }
            for (let i = 0; i < reviews.length; i++) {
                reviews[i].style.display = "none";
            }
            reviews[review].style.display = "block";
        }
    

  

输出：