JQuery ротатор всегда возвращается к первому изображению - PullRequest
Новая
       22

JQuery ротатор всегда возвращается к первому изображению

0 голосов
/ 19 июля 2011

Это довольно просто, после последнего дочернего img код возвращается к первому, и по какой-то причине эффект fadeOut не возникает.

Вот HTML: 

<div id="reel">
<img src="http://www.myweddingflowerideas.co.uk/wedding-flowers.jpg" />
<img src="http://www.aumflowersindiaflorists.com/images/flowers-chennai-1.jpg" />
<img src="http://img4.sunset.com/i/2008/12/image-adds-1217/alcatraz-flowers-galliardia-m.jpg?300:300" />
<img src="http://www.flowerslebanondelivery.com/catalog/images/Val101.jpg" />
<img src="http://www.weddingfloweridea.com/wp-content/uploads/2011/01/wedding-flowers-11.jpg" />
<img src="http://flowershopsflowers.com/wp-content/uploads/2011/04/Cardinal-Flowers.jpg" />
</div>

CSS: 

#reel img{
position:absolute;
}

JQuery: 

$(document).ready(function(){
$("#reel img:lt(5)").hide();
var counter = $("#reel img").length-1;

var i = setInterval(function() {

           $("#reel img").eq(counter).show();    
        $("#reel img").eq(counter - 1).show();
        $("#reel img").eq(counter).fadeOut(2000);
        counter--;

        if (counter === 0) {
            counter = 5;
        }
    }, 4000);

});

Проверьте эту скрипку, чтобы увидеть проблему в действии: http://jsfiddle.net/FB9a9/

Все, что я хочу, это чтобы последнее изображение исчезло на первом, без привязки к нему, так есть ли способ сделать это?

1 Ответ

1 голос
/ 19 июля 2011

Проблема в том, что когда вы добираетесь до конца (0-е изображение), следующее изображение (5-е) следует за ним в разметке, придавая ему более высокий порядок наложения. Вызов show () делает его видимым сверху, а другое изображение fadeOut () за ним. Возможно, вы захотите извлечь элементы img из #reel и сохранить их в массиве, добавляя их только тогда, когда они отображаются.

...