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

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

HTML代码：

<div class="slider">
  <ul class="slides">
    <li data-time="5000"><img src="slide1.jpg" alt=""></li>
    <li data-time="3000"><img src="slide2.jpg" alt=""></li>
    <li data-time="6000"><img src="slide3.jpg" alt=""></li>
  </ul>
</div>

CSS代码：

.slider {
  position: relative;
}
.slides {
  position: relative;
  overflow: hidden;
  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:first-child {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.slides li.active {
  z-index: 3;
  opacity: 1;
}

JS代码：

$(function(){
  var interval = 5000; // 默认停留时间为5秒
  var slides = $('.slides li');
  var currentSlide = 0;
  
  // 设置第一张幻灯片的停留时间
  var firstSlideTime = slides.eq(0).data('time');
  if(firstSlideTime){
    interval = firstSlideTime;
  }
  
  // 设置第一张幻灯片为活动幻灯片
  slides.eq(0).addClass('active');
  
  // 定时切换幻灯片
  setInterval(function(){
    if(currentSlide === slides.length - 1){
      currentSlide = 0;
    } else {
      currentSlide++;
    }
    
    // 设置当前幻灯片的停留时间
    var slideTime = slides.eq(currentSlide).data('time');
    if(slideTime){
      interval = slideTime;
    } else {
      interval = 5000; // 如果没有设置停留时间，就使用默认停留时间
    }
    
    // 切换幻灯片
    slides.eq(currentSlide).addClass('active').siblings().removeClass('active');
  }, interval);
  
  // 鼠标悬停在幻灯片上时停止自动切换
  $('.slider').hover(function(){
    clearInterval();
  }, function(){
    setInterval();
  });
});

解释：

1. HTML中每个幻灯片li都加了一个data-time属性，用于设置该幻灯片的停留时间（单位为毫秒）。
2. JS中先获取所有幻灯片li，然后设置第一张幻灯片的停留时间（如果有设置的话），并将第一张幻灯片设为活动幻灯片。
3. 使用setInterval函数定时切换幻灯片。在切换幻灯片之前，先获取当前幻灯片的停留时间（如果有设置的话），并使用该停留时间作为下一张幻灯片的停留时间。如果没有设置停留时间，则使用默认停留时间。
4. 鼠标悬停在幻灯片上时，停止自动切换。