使用 JavaScript 创建幻灯片

Question

我目前正在开发一个小型网络项目，它应该包含多个幻灯片。因为我以前从未真正使用过 JavaScript，所以这比我希望的要难......

我从 w3schools 中找到了这个相当简单的代码，我正在尝试实现它。可悲的是，我遇到了多个问题，我不知道如何解决：

起初我尝试页面 (https://www.w3schools.com/howto/howto_js_slideshow.asp)“幻灯片/轮播”上的第一个示例。这很好用，除非您单击上一个/下一个按钮，否则它不会显示任何内容。因此，如果我重新加载页面，幻灯片容器是空的，而不是显示第一张幻灯片。

现在我想在我的网页上放第二个滑块。在这里，我将 JavaScript 代码切换到 w3schools "Multiple Slideshows" 中的最后一个示例。在这里，我遇到了与以前相同的问题：刷新页面时，除非您单击 revious/next 按钮，否则两个幻灯片都不会显示图像。我还想在每个幻灯片的底部添加点。遗憾的是，我不知道如何将点添加到 JavaScript 代码中。

谁能帮我理解这个？ 非常高兴提前谢谢你！！ :)

编辑1： 我想澄清一下：我不想要自动幻灯片。只有当我单击上一个/下一个按钮或点时，幻灯片本身才会改变。问题是，当我第一次打开页面时，幻灯片什么也没有显示。默认情况下，我喜欢显示第一张幻灯片。

编辑2： 我刚刚将我的 JavaScript 代码复制到了我的 html 的底部（而不是 extern script.js 文件），这解决了刷新页面时不显示第一张幻灯片的问题！但我仍然需要一些帮助来集成 javascript 代码中的点

我的代码：

/***************************************************************** SLIDESHOW **/
var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["slides1", "slides2"]
showSlides(0, 0);
showSlides(0, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no]-1].style.display = "table";
}

*  { margin:0px; padding:0px; border:0px; box-sizing: border-box;}
html { width:100%; height:100%; }
body {
    position:relative;
    margin: 0px auto;
    padding: 0px;
    height: 100%;
    width: 100%;
}

/****************************************************************** BASIC CSS */
body {
    font-family:'Montserrat';
    font-weight: 400;
    font-size: 12px;
}

/** HEADINGS **/
h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat';
    font-weight: normal;
    position:    relative;
    padding:  0 0 20px 0;
}
h1 { font-size: 33px; }

/** LAYOUT **/
.row:after {
    content: "";
    clear: both;
    display:table;
}

[class*="col-"] {
    float:left;
    width:99.99999%;
    height:100%;
}

@media (min-width:640px) {
    .col-s-1{width:99.99999%;} .col-s-2{width:49.99999%;} .col-s-3{width:33.22222%;} .col-s-4{width:24.9999%;}
}
@media (min-width:800px) {
    .col-m-1{width:99.99999%;} .col-m-2{width:49.99999%;} .col-m-3{width:33.22222%;} .col-m-4{width:24.9999%;}
}
@media (min-width:1024px) {
    [class*="col-"] {height:100vh;}
    .col-l-1{width:99.99999%;} .col-l-2{width:49.99999%;} .col-l-3{width:33.22222%;} .col-l-4{width:24.9999%;}
}

article {position:relative;padding:80px 70px;}
.center_wrapper {
    display:table;
    width:100%;
    height:100%;
}
.center_box {
    margin: 0px auto;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

/*************************************** SLIDER GENERAL **/
.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.slides1 {
    display: none;
    width:100%;
    height:100%;
}
/** NEXT, PREVIOUS AND DOTS **/
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    text-decoration:none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}

/** FADING ANIMATION **/
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/********************************************* SLIDER 1 **/
#BigSlider {
    background-image: url('images/red.jpg'); 
    background-color:red;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover;
    height:100vh;
    width:100%;
}
/** DEPARTMENTS **/
.department {
    width:300px;
    margin: 0px auto;
}
.department>a {
    color:#fff;
    text-decoration:none;
    
}
.department>a>i {
    font-size:60px;
    margin-bottom:10px;
}
.department>a>h4 {
    font-size:18px;
    font-weight:bold;
}
.department>a>p {
    font-size:14px;
    text-align:left;
}

/********************************************* SLIDER 2 **/
/** EMPLOYEES **/
#Employees {
    background-color:#222;
    color:#fff;
}
#Employees>h1 {
    color:#fff;
}
.employee_info {color:#fff;}

<div class="row">
  <article id="BigSlider" class="col-l-1">                    
      <div class="slideshow-container">
          <div class="slides1 fade">
               <div class="center_box">
                    <div class="department">
                         <a href="#">
                              <i class="far fa-envelope"></i>
                              <h4>HEADLINE1</h4>
                              <p>
                                  Some Text here...
                              </p>
                          </a>
                      </div>
                                
                </div>
            </div>

            <div class="slides1 fade">
                <div class="center_box">
                    <div class="department">
                        <a href="#">
                            <i class="fas fa-users"></i>
                            <h4>HEADLINE 2</h4>
                            <p>
                                Some Text here...
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <div class="slides1 fade">
                <div class="center_box">
                    <div class="department">
                        <a href="#">
                            <i class="fas fa-users"></i>
                            <h4>HEADLINE 3</h4>
                            <p>
                                Some Text here...
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
        </div>
        <br>

        <!-- The dots/circles -->
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>   
    </article>
</div>
            
<div class="row">
    <article id="Employees" class="col-l-2">
        <h1>HEADLINE HEADLINE HEADLINE</h1>

        <div id="pic_box_mobile" class="slideshow-container">
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>111NAME NAME</h4>
                            <h5>111POSITION</h5>
                        </div>

                </div>
            </div>
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>222NAME NAME</h4>
                            <h5>222POSITION</h5>
                        </div>

                </div>
            </div>
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>333NAME NAME</h4>
                            <h5>333POSITION</h5>
                        </div>

                </div>
            </div>
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>444NAME NAME</h4>
                            <h5>444POSITION</h5>
                        </div>

                </div>
            </div>
           <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
        </div>
        <br>

        <!-- The dots/circles -->
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
          <span class="dot" onclick="currentSlide(4)"></span>
        </div>  
    </article>

</div>

Answer 1

这是一个轮播，每页可以显示多个项目。

https://jsfiddle.net/rimika89/a9pqnv3f/1/

class Carousel {
  constructor() {
    this.currentPage = 1;
    this.perPage = 2;
    this.data = [];
    this.getData();
    //if (this.data) {
     // this.displayData();
    //}
    document.querySelector(".right-arrow").addEventListener("click", (event) => {
      event.preventDefault();
      this.handleRightClick();
    });
    document.querySelector(".left-arrow").addEventListener("click", (event) => {
      event.preventDefault();
      this.handleLeftClick();
    });
  }
  countTotalPages() {
    let totalPages = Math.ceil(this.data.length / this.perPage);
    return totalPages;
  }
  handleLeftClick() {
    if (this.currentPage === 1) {
      return;
    }
    this.currentPage--;
    this.displayData();
  }
  handleRightClick() {
    const totalPages = this.countTotalPages();
    if (this.currentPage >= totalPages) {
      return;
    }
    this.currentPage++;
    this.displayData();
  }
  paginate() {
    let startIndex = (this.currentPage - 1) * this.perPage;
    let endIndex = (this.currentPage * this.perPage);
    return this.data.slice(startIndex, endIndex);
  }
  displayData() {
    if (this.data) {
      const paginatedList = this.paginate();
      document.querySelector('.carousel-wrapper').innerHTML = paginatedList !== '' ? paginatedList.map((item) => {
        return `<div class="carousel-item" id=${item.id}>${item.data}</div>`;
      }).join('') : '<div>No Data To show</div>';
      document.querySelector(".current-page").innerHTML = this.currentPage;
      document.querySelector(".total-pages").innerHTML = this.countTotalPages();
    }
  }
  fetch() {
    const data = [{
        'id': '1',
        'data': 'Data 1'
      },
      {
        'id': '2',
        'data': 'Data 2'
      },
      {
        'id': '3',
        'data': 'Data 3'
      },
      {
        'id': '4',
        'data': 'Data 4'
      },
      {
        'id': '5',
        'data': 'Data 5'
      }
    ];
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data);
      }, 2000);
    });
  }
  async getData() {
    try {
      const response = await this.fetch();
      this.data = response;`enter code here`
      this.displayData();
    } catch (error) {
      console.log('fetch failed', error);
    }
  }
}
let carousel = new Carousel();

Answer 2

您的答案在于问题本身。这是 w3Schools 的LINK。

• 底部有您需要的小点。
• 图像（幻灯片）也会自动滚动。
• 每次重新加载页面时都会显示第一张幻灯片。
• 代码是 w3Schools，适合初学者使用，您无需了解 javascript 即可在您的网站中嵌入幻灯片。
• 该幻灯片的更多技术术语是 Carousel

一切顺利:)