JavaScript 如何创建一个评论轮播

在本文中，我们使用JavaScript创建了一个评论轮播。我们还使用了基本的HTML和CSS进行样式设置。JavaScript轮播是一个循环播放一组图像或内容的幻灯片组件。它使用JavaScript来控制过渡和用户交互，提供交互式和动态的体验。评论轮播用于显示评论。

方法：

在body标签中，创建一个包含评论者图像、名称和文本的嵌套div标签。
添加上一个和下一个按钮，以便分别查看上一个和下一个评论。
为了样式设置，在style标签中添加一些CSS属性，如对齐、字体大小、内边距、外边距等。
使用JavaScript在script标签中创建一个函数，以一次只显示一个评论。

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

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

注：在按钮标签中，我们指定了一个onclick属性。当用户点击按钮时，onclick事件属性会触发。它会在按钮被点击时执行该函数。

CSS代码： 用于样式设置我们使用了CSS属性。

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

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

轮播功能： 这个函数使用getElementsByClassName()方法通过指定的类名获取所有元素作为对象。可以通过元素的索引访问这些对象。该函数接收一个参数，即要显示的元素的索引。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
       <title>review carousel using JavaScript</title>
       <link rel="stylesheet" href="style.css">
       <script src="script.js"></script>
</head>
 
<div class="review">
       <div class="review__items">
              <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
              <h1>GeeksforGeeks</h1>
              <p>
                 Let's learn to create a review
                 carousel using JavaScript.
              </p>
       </div>
       <div class="review__items">
              <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png" />
              <h1>Geek Here</h1>
              <p>
                 Very useful site to learn cool
                 stuff. Improve your skills
              </p>
       </div>
       <div class="review__items">
              <img src=
"https://media.geeksforgeeks.org/img-practice/courses/GfG_Logo.png" />
              <h1>Hello there!</h1>
              <p>
                 Have a nice day, Please visit
                 us again. Nice to meet you.
              </p>
       </div>
       <div class="review__button">
              <button id="prev" onclick="previousReview()">
                     PREV
              </button>
 
              <button id="next" onclick="nextReview()">
                     NEXT
              </button>
       </div>
</div>
</html>

CSS

/* filename: style.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;
}

Javascript

//Filename: script.js
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";
}

输出：

JavaScript 如何创建一个评论轮播