Question

我一直在关注教程，因为我想学习如何自己制作图像轮播/幻灯片，但我似乎无法工作。到目前为止，这个是最有意义的那个，但它仍然无效。有人能帮忙吗？

HTML：

<div id="slideshow">
    <ul>
        <li><img class="slide" src="http://i.imgur.com/zjynAaQ.jpg"  /></li>
        <li><img class="slide" src="http://i.imgur.com/jxHZA2o.jpg"  /></li>
        <li><img class="slide" src="http://i.imgur.com/zn6DmkV.jpg"  /></li>
    </ul>
</div>

CSS：

#slideshow {
    width: 804px;
    height: 312px;
    margin: 100px auto 50px auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    overflow: hidden;
}

.slide {
    width: 100%;
}

#slideshow li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
}

#slideshow img.active {
    z-index: 10;
}

#slideshow img.last-active {
    z-index: 9;
}

的Javascript

$(document).ready(function() {
        // settings
      var $slider = $('#slideshow ul'); // class or id of carousel slider
      var $slide = '#slideshow li'; // could also use 'img' if you're not using a ul
      var $transition_time = 1000; // 1 second
      var $time_between_slides = 4000; // 4 seconds

      function slides(){
        return $slider.find($slide);
      }

      slides().fadeOut();

      // set active classes
      slides().first().addClass('active');
      slides().first().fadeIn($transition_time);

      // auto scroll 
      $interval = setInterval(
        function(){
          var $i = $slider.find($slide + '.active').index();

          slides().eq($i).removeClass('active');
          slides().eq($i).fadeOut($transition_time);

          if (slides().length == $i + 1) $i = -1; // loop to start

          slides().eq($i + 1).fadeIn($transition_time);
          slides().eq($i + 1).addClass('active');
        }
        , $transition_time +  $time_between_slides 
      );

});

Answer 1

您的错误是您尝试$slider.find($slide)但$slide的选择器引用了#slideshow不在ul元素内的$slider { {1}}。

解决方案是修复$slide的选择器，使其与ul相对。在这种情况下，引用li就好了。

var $slide = 'li';

我似乎无法让这个JQuery幻灯片工作

1 个答案:

jsFiddle