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)が、 のセレクターは、によって表される要素内にない$slideID を参照しています。#slideshowul$slider

解決策は、セレクターを修正して$slide、 に対して相対的になるようにすることですul。この場合、参照liは問題ありません。

var $slide = 'li';

jsフィドル

于 2013-11-09T22:42:48.397 に答える