如何使用 JQuery 自动播放幻灯片？答案

【问题标题】：How can I use JQuery to automate my slideshow?如何使用 JQuery 自动播放幻灯片？
【发布时间】：2021-10-04 18:24:17
【问题描述】：

我正在尝试使用 JQuery 自动化我的幻灯片放映，但到目前为止还没有运气。下面是我的 HTML 的片段。我没有包含我的 CSS，因为我认为它不相关。

HTML

<div class="slideshow-container">
            
              <div id="slideshow" class="mySlides fade">
                <div class="numbertext">1 / 3</div>
                <a href="post003.html"><img src="003.jpg" style="width:100%"></a>
                <div class="text"><a href="003.html">Popular Posts</a></div>
              </div>
            
              <div class="mySlides fade">
                <div class="numbertext">2 / 3</div>
                <img src="002.jpg" style="width:100%">
                <div class="text">New Styles</div>
              </div>
            
              <div class="mySlides fade">
                <div class="numbertext">3 / 3</div>
                <img src="001-main.jpg" style="width:100%">
                <div class="text">Submissions</div>
              </div>
            
              <!-- Next and previous buttons -->
              <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
              <a class="next" onclick="plusSlides(1)">&#10095;</a>
            </div>
            <br>
                      
                      </div>

我尝试了多个不同的 JQuery 脚本，但似乎没有任何效果。

【问题讨论】：

Vanila jQuery 今天很少有人接触，除非他知道自己在做什么。对于学习者，我建议使用Owl Carousel 2。它们只是 jQuery 模板，下载它们的 CSS、JS 文件，将它们包含在您的页面中，在其文档中使用现成的示例。省心省力

标签： html jquery slideshow

【解决方案1】：

其实CSS很重要。

有很多方法可以解决这个问题。我使用您的代码的解决方案是这样的：

var leftPosition = 0; //Handle the left position of the rail
// Go Back
$('.prev').click(function(){
    leftPosition -= 1; //go one before
  if(leftPosition < 0) //If less than zero, then go to last
    leftPosition = $('.mySlides').length-1;
    
  animate(leftPosition);
});
$('.next').click(function(){
    leftPosition += 1; //Same than prev but opposite, if more than total of slides, go to the begining
    if(leftPosition >= $('.mySlides').length)
        leftPosition = 0;

    //send the left position to animate
  animate(leftPosition);
});

function animate(slide){
    //animate multipling the lefPosition flag *-100 to make it animate left
    $('.rail').animate({ left: slide*-100+'%' }, 200);
}

/* The container define the area of slideshow */
.slideshow-container{
  width:100%;
  background:yellow; /* just to identify */
  height:100px;
  position: relative;
  overflow: hidden; /* This will make the slideshow works with the rail created next */
}

.rail{
  width: 300%; /* Enough width to contain your slides */
  position: absolute;
}
.mySlides{
  width:33.33%; /* Inside the rail, 33% it is the 100% of slideshow container */
  background: orange; /* just to identify */
  float: left;
}

<div class="slideshow-container">
 <div class="rail">
   <div id="slideshow" class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <a href="post003.html"><img src="003.jpg" style="width:100%"></a>
      <div class="text"><a href="003.html">Popular Posts</a></div>
   </div>
   <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="002.jpg" style="width:100%">
      <div class="text">New Styles</div>
   </div>
   <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="001-main.jpg" style="width:100%">
      <div class="text">Submissions</div>
   </div>
  </div>
  
</div>
<!-- Next and previous buttons -->
<a class="prev">&#10094;</a>
<a class="next">&#10095;</a>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：