Question

我是编码的新手，所以从codecademy开始。我的JQuery代码在我的旋转木马图像滑块上运行良好，但是当我在jsfiddle中尝试它时，它是静态的，只停留在一个图像上。

这是JQuery代码：

$(document).ready(function() {
  var $slider = $('.slider'); 
  var $slide = 'img';
  var $transition_time = 25 00;
  var $time_between_slides = 4000; 

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

要放置在滑块中的图像存储如下：

<div id="jumbotron"> 
 <div class="slider">
    <img class="img" src="http://photos.travellerspoint.com/203325/Peru_239.jpg" width="100%">
    <img class="img" src="https://c2.staticflickr.com/4/3367/5734521147_ab8fa45d8a.jpg" width="100%">
    <img class="img"src="http://cdn.c.photoshelter.com/img-get/I0000aT96V0jJZX4/s/650/650/Alpaca-Wool-Factory-El-Alto-Bolivia-17.jpg" width="100%"> 
    <img class="img"src="https://kitaliana.files.wordpress.com/2011/09/rug_cusco1.jpg" width="100%">
</div>
</div>

这是我编写的第一个，所以我真的不知道代码在一个案例中工作而不在另一个案例中的位置，即使代码相同......

Answer 1

尝试做：

var $transition_time = 2500;

而不是：

var $transition_time = 25 00;

Slider在jsfiddle中获得了成功

1 个答案: