jQuery слайдер с постепенным изменением изображения

Question

Я пытаюсь создать простой слайдер JQuery. И каждый раз должно быть видно только одно изображение. И после x секунд новое изображение shoud исчезает. Только проблема в том, что изображения не отображаются и задерживаются на первом снимке. Может быть, кто-то может мне помочь.

код до сих пор: HTML

<div id="slideshow"> 
    <span> 
     <div class="vHolder"> 
      <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 1" class="active" /> 
     </div> 
    </span> 
    <span> 
     <div class="vHolder"> 
      <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 2" /> 
     </div> 
    </span> 
    <span> 
     <div class="vHolder"> 
      <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 3" /> 
     </div> 
    </span> 
    <span> 
     <div class="vHolder"> 
      <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 4" /> 
     </div> 
    </span> 
</div> 

JS:

function slideSwitch() { 
    var $active = $('#slideshow img.active'); 

    if ($active.length == 0) $active = $('#slideshow img:last'); 

    var $next = $active.next().length ? $active.next() 
     : $('#slideshow img:first'); 

    $active.addClass('last-active'); 

    $next.css({opacity: 0.0}) 
     .addClass('active') 
     .animate({opacity: 1.0}, 1000, function() { 
      $active.removeClass('active last-active'); 
     }); 
} 

$(function() { 
    setInterval("slideSwitch()", 2500); 
}); 

И мой рабочий jsfiddle: http://goo.gl/4AvUcr

Answer 1

Ваш слайдер не работает, потому что вы используете следующий в неправильном направлении : next - селектор, поэтому следующий брат для img будет сам по себе, поскольку в div нет изображения.

Если изменить код, чтобы удалить теги пролетных обертывание дивы (не знаю, почему у вас есть эти, и это неверный код), вы можете использовать следующее:

function slideSwitch() { 
 
    var $active = $('#slideshow .active'); 
 

 
    if ($active.length == 0) $active = $('#slideshow > div:last'); 
 

 
    var $next = $active.next().length ? $active.next() : $('#slideshow > div:first'); 
 

 
    $active.addClass('last-active'); 
 

 
    $next.css({ 
 
     opacity: 0.0 
 
    }) 
 
    .animate({ 
 
     opacity: 1.0 
 
    }, 1000, function() { 
 
     $next.addClass('active') 
 
    }); 
 

 
    $active.css({ 
 
     opacity: 1.0 
 
    }) 
 
    .animate({ 
 
     opacity: 0.0 
 
    }, 1000, function() { 
 
     $active.removeClass('active last-active'); 
 
    }); 
 

 

 
} 
 

 
$(function() { 
 
    setInterval("slideSwitch()", 2500); 
 
});

#slideshow { 
 
    position: relative; 
 
    height: 350px; 
 
} 
 

 
#slideshow .vHolder { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 8; 
 
    opacity: 0.0; 
 
} 
 

 
#slideshow img { 
 
    max-width: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="slideshow"> 
 
    <div class="vHolder" class="active"> 
 
    <a href="#"><img src="http://lorempixel.com/150/150/city/1" alt="Slideshow Image 1" /></a> 
 
    </div> 
 
    <div class="vHolder"> 
 
    <a href="#"><img src="http://lorempixel.com/150/150/city/2" alt="Slideshow Image 2" /></a> 
 
    </div> 
 

 
    <div class="vHolder"> 
 
    <a href="#"><img src="http://lorempixel.com/150/150/city/3" alt="Slideshow Image 3" /></a> 
 
    </div> 
 
    <div class="vHolder"> 
 
    <a href="#"><img src="http://lorempixel.com/150/150/city/4" alt="Slideshow Image 4" /></a> 
 
    </div> 
 
</div>