Галерея затухания jquery

StackOverflow https://stackoverflow.com/questions/1686665

  •  18-09-2019
  •  | 
  •  

Вопрос

Привет всем, я написал простую галерею затухания с помощью jQuery.По сути, он циклически повторяет набор изображений, плавно переходя от одного к другому.Как и предполагалось, он работает отлично, пока не дойдет до последнего изображения, а затем не плавно переходит от последнего к первому, просто чтобы отобразить его.

вот мой jQuery

$(document).ready(function(){

Zindex = 99999;
i = 0;

$(".flash img").each(function(){
    $(this).css({
        'position':'absolute',
        'z-index':Zindex,
        'display':'none'
    });
    Zindex--;
});

$(".flash img:first").show();

doFade = function(){        
    if( i == 6 ) { i = 0; };        
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000);      
    setTimeout("doFade()", 2000);
    i++;
};

doFade();

});

примечание:изображений будет только 7.

И моя разметка

<div class='flash'>
    <img src="img/gallery/picture1.jpg" width="780" height="253" alt="Picture1">
    <img src="img/gallery/picture2.jpg" width="780" height="253" alt="Picture2">
    <img src="img/gallery/picture3.jpg" width="780" height="253" alt="Picture3">
    <img src="img/gallery/picture4.jpg" width="780" height="253" alt="Picture4">
    <img src="img/gallery/picture5.jpg" width="780" height="253" alt="Picture5">
    <img src="img/gallery/picture6.jpg" width="780" height="253" alt="Picture6">
    <img src="img/gallery/picture7.jpg" width="780" height="253" alt="Picture7">
</div>

Я думаю, проблема кроется в строке

if( i == 6 ) { i = 0; };
Это было полезно?

Решение

Когда вы достигаете конца «цикла» и выполняете его, происходят две вещи:

if( i == 6 ) { i = 0; };

Во-первых, ты исчезаешь i + 1, это второе изображение, а не первое, потому что i сейчас 0.

Во-вторых, ты исчезаешь i, первое изображение, которого даже не видно.Последнее отображаемое изображение было изображением 7, когда i + 1 было 6.

Таким образом, вы никогда не скрываете последнее изображение и никогда не показываете первое изображение.Для меня действительно быстрым решением было сделать оператор затухания первым, который выполнялся (я все еще «указывал» на текущее изображение) и установить i = -1 вместо 0 когда «цикл» заканчивается.

doFade = function(){
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000); 
    if( i == 6 ) { i = -1; }
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);             
    setTimeout("doFade()", 2000);
    i++;
};

Однако, похоже, это прерывает поток переходов при запуске цикла (я думаю, потому что операторы затухания теперь разделены логикой).Простое решение этой проблемы должно быть таким же простым, как введение current и next переменные и выполнение всей логики вначале, используя эти переменные в операторах затухания.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top