0

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

这是我的小提琴：http: //jsfiddle.net/NLDAX/

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 
      );

});
4

1 回答 1

1

您的错误是您正在尝试执行$slider.find($slide)但选择器$slide引用的 id#slideshow不在ul由$slider.

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

var $slide = 'li';

jsFiddle

于 2013-11-09T22:42:48.397 回答