superslide 单独设置每张幻灯片图片的停留时间 完整代码

以下是使用Superslide单独设置每张幻灯片图片的停留时间的完整代码：

HTML代码：

<div class="slider">
  <ul class="slides">
    <li><img src="image1.jpg" data-time="3000"></li>
    <li><img src="image2.jpg" data-time="5000"></li>
    <li><img src="image3.jpg" data-time="7000"></li>
  </ul>
</div>

CSS代码：

.slider {
  position: relative;
  overflow: hidden;
}
.slides {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slides li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
.slides li.active {
  opacity: 1;
  z-index: 2;
}

JavaScript代码：

$(function() {
  var interval = 0;
  var slides = $(".slides li");
  var currentSlide = 0;

  function startSlideshow() {
    interval = setInterval(nextSlide, slides.eq(currentSlide).find("img").data("time"));
  }

  function stopSlideshow() {
    clearInterval(interval);
  }

  function nextSlide() {
    slides.eq(currentSlide).removeClass("active");
    currentSlide = (currentSlide + 1) % slides.length;
    slides.eq(currentSlide).addClass("active");
    stopSlideshow();
    startSlideshow();
  }

  startSlideshow();
});

在HTML代码中，每个幻灯片图片都有一个`data-time`属性，用于设置该图片停留的时间（以毫秒为单位）。

在JavaScript代码中，我们首先定义了一个`interval`变量，用于存储计时器的ID。然后，我们获取所有幻灯片图片的元素，并定义一个`currentSlide`变量，用于存储当前活动的幻灯片的索引。

`startSlideshow`函数用于启动幻灯片播放，并根据当前幻灯片的停留时间设置计时器的间隔时间。

`stopSlideshow`函数用于停止幻灯片播放，通过`clearInterval`函数清除计时器。

`nextSlide`函数用于切换幻灯片，它会将当前幻灯片的`active`类移除，然后将`currentSlide`变量递增并对幻灯片数量取模得出下一个幻灯片的索引，将其添加`active`类。最后，它会停止当前的幻灯片播放并启动下一个幻灯片的播放。

最后，我们调用`startSlideshow`函数启动幻灯片播放。