갤러리의 목록 항목을 회전하는 jQuery

Question

이것은 이전에 아마도 답변을 받았을 것입니다. 그리고 나는 이것이 어떻게 작동해야하는지 이미 알고 있지만, 어떤 이유로 그것이 아닙니다. 나는 그것이 어떻게 요소들을 반복 하는지를 생각할 수 있습니다.

$(document).ready(function() { 
    var element = '#gallery ul#gallery-container'; 
var idx=0; 
var timeout = 3000; 
var number = $(element + ' li').length; 

function changeSlide() { 

    $(element + ' li:eq(' + idx + ')').fadeOut(); 

    idx = idx + 1; 

    if (idx == number) { 
     idx=0; 
    } 

    $(element + ' li:eq(' + idx + ')').fadeIn().delay(timeout).delay(0, function() { 
     changeSlide(); 
    });; 

} 

$(element + ' li').hide(); 

$(element + ' li:first').fadeIn().delay(timeout).delay(0, function() { 
    changeSlide(); 
}); 
}); 

그런 다음 목록은 다음과 같이이다 :

<div id="gallery"> 
    <ul id="gallery-container"> 
     <li><img src="media/images/screen-shot-02.jpg" width="173" height="258" alt=" "></li> 
     <li><img src="media/images/screen-shot-01.jpg" width="173" height="258" alt=" "></li> 
    </ul> 
</div> 

목록 항목이 함수를 호출하고 자신을 숨 깁니다 그래서 나는 지연 후, 하나의 요소의 하나를 통해 루프를 얻으려고 노력했다, 카운터가 증가되고 현재 색인이 표시됩니다. 는 나는 그것을 호출되는 함수에 경고를 넣어 마치 범인이로 의심 :

$(element + ' li:eq(' + idx + ')').fadeOut(); 

Answer 1

가장 큰 문제는 주석 상태로, delay은 당신이하지 생각하지 않는다 - 당신이해야 대신 네이티브 setTimeout 함수를 살펴보십시오. 여기에 더 효율적으로 만들 수있는 여러 곳이 있습니다.

var element = $('#gallery-container li'), 
    length = element.length, 
    current = 0, 
    timeout = 3000; 

function changeSlide() { 
    element.eq(current++).fadeOut(300, function(){ 
     if(current === length){ 
      current = 0; 
     } 

     element.eq(current).fadeIn(300); 
    }); 

    setTimeout(changeSlide, timeout); 
} 

element.slice(1).hide(); 
setTimeout(changeSlide, timeout); 

우리는 동적으로 생성 된 선택과 jQuery를 기능을 보여주고, 대신 시작시 캐시 된 모든 슬라이드가 포함 된 jQuery를 개체의 단일 인스턴스를 조작하지 않으려 고 : 이것 좀 보라. fade 함수가 제공하는 콜백 함수를 사용하여 현재 슬라이드가 페이드 아웃 한 후 다음 슬라이드를 페이드 인합니다. 플러그인에 포장, 여전히 더 나은

$(document).ready(function() { 
    var element = '#gallery ul#gallery-container'; 
    var idx = 0; 
    var timeout = 3000; 
    var number = $(element + ' li').length; 

    setInterval(function() { 
     idx = (idx + 1) % number; 
     $(element + ' li:visible').fadeOut(); 
     $(element + ' li:eq(' + idx + ')').fadeIn(); 
    },timeout); 
    $(element + ' li:not(:first)').hide(); 
}); 

또는 :

는

Answer 2

나는 이런 식으로 뭔가를 할 것이다 간단한 데모 http://www.jsfiddle.net/b3Lf5/1/를 참조

(function ($) { 
    $.fn.customGallery = function (options) { 
     defaults = { 
      timeout : 3000 
     }; 
     options = $.extend(defaults, options); 
     return this.each(function() { 
      var idx = 0, number = $(this).children('li').size(), element = this; 
      setInterval(function() { 
       idx = (idx + 1) % number; 
       $(element).children('li:visible').fadeOut(); 
       $(element).children('li:eq(' + idx + ')').fadeIn(); 
      },options.timeout); 
      $(element).children('li:not(:first)').hide(); 
     }); 
    }; 
}(jQuery)); 

jQuery(document).ready(function($) { 
    $('#gallery-container').customGallery() 
}); 

편집 : 플러그인 코드를 편집하여 우수 사례를 제시합니다.