جيعي يتلاشى معرض

Question

القش جميعا، لقد كتبت معرضا بسيطا يتلاشى مع جيس. انها حلقات أساسا على الرغم من مجموعة من الصور، يتلاشى من واحد إلى آخر. إنه يعمل بشكل مثالي، كما هو متوقع، حتى يصل إلى الصورة الأخيرة، ثم لا تتلاشى من آخر إلى الأول، فقط لعرضه.

هنا مسج بلدي

$(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; };

Answer 1

تحدث شيئان عند الوصول إلى نهاية "حلقة" وتنفيذها:

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 المتغيرات والقيام بجميع المنطق في البداية، باستخدام هذه المتغيرات في بيانات التلاشي.