Question

我有一个自动幻灯片，工作正常。但是，我希望能够改变某些幻灯片的速度。以下是代码：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1} 
  slides[slideIndex-1].style.display = "block"; 
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

由于

Answer 1

我把你的代码放到了几乎一流的类中。

小提琴：
https://jsfiddle.net/4bjcdftq/

The Snippet：

＆＃13;

var iSlider = {
  slideIndex: null,
  prevSlideIndex: null,
  slides: null,
  defaultDuration: 2000,

  initSlides: function(){
    this.slides = document.getElementsByClassName("iSlide");
    for( var i = 0; i < this.slides.length; i++ ){
      this.slides[i].style.display = "none"; 
    }
    this.prevSlideIndex = null;
    this.slideIndex = -1;
  },

  showSlides: function(){
    if( this.prevSlideIndex != null )  this.slides[ this.prevSlideIndex ].style.display = "none";
    this.slideIndex = ( this.slideIndex + 1 + this.slides.length ) % this.slides.length;
    this.slides[ this.slideIndex ].style.display = "block";
    this.prevSlideIndex = this.slideIndex;
    var duration = +( this.slides[ this.slideIndex ].getAttribute('data-duration') || this.defaultDuration );
    setTimeout( this.showSlides.bind( this ), duration ); // Change image every 2 seconds
  }
};

iSlider.initSlides();
iSlider.showSlides();

＆＃13;

    <div class="iSlide" data-duration="500">111</div>
    <div class="iSlide" data-duration="">222</div>
    <div class="iSlide" data-duration="4000">333</div>
    <div class="iSlide" data-duration="">444</div>

＆＃13;

Answer 2

您可以向包含每张幻灯片超时的元素添加数据属性，然后在显示幻灯片时阅读它。

E.g。（使用你的代码）

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, $(slides[slideIndex - 1]).data("time")); // Grab the data-time from the element we're using
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mySlides" data-time="500">Test 1</div>
<div class="mySlides" data-time="2000">Test 2</div>
<div class="mySlides" data-time="5000">Test 3</div>
<div class="mySlides" data-time="500">Test 4</div>

Answer 3

您可以向幻灯片data-timeout

添加属性

即：

<div class='mySlides' data-timeout='2000'>Slide 1</div>

然后每个循环都会获得幻灯片的特定超时。

＆＃13;

var slideIndex = 0;

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  var timeout = slides[slideIndex - 1].getAttribute('data-timeout');
  console.log(timeout);
  setTimeout(showSlides, timeout);
}

showSlides();

＆＃13;

<div class='mySlides' data-timeout='2000'>Slide 1</div>
<div class='mySlides' data-timeout='3000'>Slide 2</div>
<div class='mySlides' data-timeout='4000'>Slide 3</div>

＆＃13;

希望有所帮助！

Answer 4

你可以这样做

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var time = 200;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
      if(i == 2){
        time = 500;
      }else{
        time = 200
      }
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1} 
  slides[slideIndex-1].style.display = "block"; 
  setTimeout(showSlides, time); // Change image every 2 seconds
}

在此示例中，我将幻灯片2的时间更改为500毫秒。

Javascript幻灯片具有可变超时

4 个答案: