내 배너 슬라이드 쇼가 실행 된 후에 재생하려면

Question

내 슬라이드 쇼가 한 번 실행되고 다시 실행되지 않으면 다시 시작되지 않습니다. 나는 아래에있는 모든 코드를 게시했다.

 $(document).ready(function() { 
     $('img.banner1').show(); 
     $('div.banner1').show(); 
     $('.nav ul li:nth-child(3)').addClass('child3'); 
     $('.nav ul li:nth-child(4)').addClass('child4'); 
     promoCycle = setInterval('cycle()', 5000); 
    }); 

    $('a.banner2').mouseover(function() { 
    $('.banner img.banner2').show(); 
    $('.banner .texts div.banner2').show(); 
    $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner3,.banner .buttons ul li.banner4,.banner .buttons ul li.banner5').removeClass('on'); 
    $('.banner .texts div.banner1,.banner .texts div.banner3,.banner .texts div.banner4,.banner .texts div.banner5').hide(); 
    $('.banner img.banner1,.banner img.banner3,.banner img.banner4,.banner img.banner5').hide(); 
    clearInterval(promoCycle); 
}); 
$('a.banner3').mouseover(function() { 
    $('.banner img.banner3').show(); 
    $('.banner .texts div.banner3').show(); 
    $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner2,.banner .buttons ul li.banner4,.banner .buttons ul li.banner5').removeClass('on'); 
    $('.banner .texts div.banner1,.banner .texts div.banner2,.banner .texts div.banner4,.banner .texts div.banner5').hide(); 
    $('.banner img.banner1,.banner img.banner2,.banner img.banner4,.banner img.banner5').hide(); 
    clearInterval(promoCycle); 
}); 
$('a.banner4').mouseover(function() { 
    $('.banner img.banner4').show(); 
    $('.banner .texts div.banner4').show(); 
    $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner3,.banner .buttons ul li.banner2,.banner .buttons ul li.banner5').removeClass('on'); 
    $('.banner .texts div.banner1,.banner .texts div.banner3,.banner .texts div.banner2,.banner .texts div.banner5').hide(); 
    $('.banner img.banner1,.banner img.banner3,.banner img.banner2,.banner img.banner5').hide(); 
    clearInterval(promoCycle); 
}); 
$('a.banner5').mouseover(function() { 
    $('.banner img.banner5').show(); 
    $('.banner .texts div.banner5').show(); 
    $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner3,.banner .buttons ul li.banner4,.banner .buttons ul li.banner2').removeClass('on'); 
    $('.banner .texts div.banner1,.banner .texts div.banner3,.banner .texts div.banner4,.banner .texts div.banner2').hide(); 
    $('.banner img.banner1,.banner img.banner3,.banner img.banner4,.banner img.banner2').hide(); 
    clearInterval(promoCycle); 
}); 
$('.banner .buttons').mouseout(function() { 
    $('.banner .buttons ul li.banner2,.banner .buttons ul li.banner3,.banner .buttons ul li.banner4,.banner .buttons ul li.banner5').removeClass('on'); 
    $('.banner .texts div.banner2,.banner .texts div.banner3,.banner .texts div.banner4,.banner .texts div.banner5').hide(); 
    $('.banner img.banner2,.banner img.banner3,.banner img.banner4,.banner img.banner5').hide(); 
    $('.banner img.banner1').show(); 
    $('.banner .texts div.banner1').show(); 
    clearInterval(promoCycle); 
}); 
var count = 1; 
function cycle(){ 
    count++; 
    if (count == 2) { 
     $('.banner .buttons li.banner2').addClass('on'); 
     $('.banner img.banner2').show(); 
     $('.banner .texts div.banner2').show(); 
     $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner3,.banner .buttons ul li.banner4,.banner .buttons ul li.banner5').removeClass('on'); 
     $('.banner .texts div.banner1,.banner .texts div.banner3,.banner .texts div.banner4,.banner .texts div.banner5').hide(); 
     $('.banner img.banner1,.banner img.banner3,.banner img.banner4,.banner img.banner5').hide(); 
    } 
    if (count == 3) { 
     $('.banner .buttons li.banner3').addClass('on'); 
     $('.banner img.banner3').show(); 
     $('.banner .texts div.banner3').show(); 
     $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner2,.banner .buttons ul li.banner4,.banner .buttons ul li.banner5').removeClass('on'); 
     $('.banner .texts div.banner1,.banner .texts div.banner2,.banner .texts div.banner4,.banner .texts div.banner5').hide(); 
     $('.banner img.banner1,.banner img.banner2,.banner img.banner4,.banner img.banner5').hide(); 
    } 
    if (count == 4) { 
     $('.banner .buttons li.banner4').addClass('on'); 
     $('.banner img.banner4').show(); 
     $('.banner .texts div.banner4').show(); 
     $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner3,.banner .buttons ul li.banner2,.banner .buttons ul li.banner5').removeClass('on'); 
     $('.banner .texts div.banner1,.banner .texts div.banner3,.banner .texts div.banner2,.banner .texts div.banner5').hide(); 
     $('.banner img.banner1,.banner img.banner3,.banner img.banner2,.banner img.banner5').hide(); 
    } 
    if (count == 5) { 
     $('.banner .buttons li.banner5').addClass('on'); 
     $('.banner img.banner5').show(); 
     $('.banner .texts div.banner5').show(); 
     $('.banner .buttons ul li.banner1,.banner .buttons ul li.banner3,.banner .buttons ul li.banner4,.banner .buttons ul li.banner2').removeClass('on'); 
     $('.banner .texts div.banner1,.banner .texts div.banner3,.banner .texts div.banner4,.banner .texts div.banner2').hide(); 
     $('.banner img.banner1,.banner img.banner3,.banner img.banner4,.banner img.banner2').hide(); 
    } 
    if (count == 6) { 
     $('.banner img.banner1').show(); 
     $('.banner .texts div.banner1').show(); 
     $('.banner .buttons ul li.banner2,.banner .buttons ul li.banner3,.banner .buttons ul li.banner4,.banner .buttons ul li.banner5').removeClass('on'); 
     $('.banner .texts div.banner2,.banner .texts div.banner3,.banner .texts div.banner4,.banner .texts div.banner5').hide(); 
     $('.banner img.banner2,.banner img.banner3,.banner img.banner4,.banner img.banner5').hide(); 
     clearInterval(promoCycle); 
    } 
} 

Answer 1

마지막 배너 이후에 clearInterval을 (를) 사용하는 데 문제가 있습니다. 그러면주기가 반복되지 않습니다. 대신 count을 1으로 재설정하고 clearInterval으로 전화를 제거해야합니다.

또한 mouseout 코드가주기를 재개하려고 시도하는 것 같습니다. clearInterval 대신 promoCycle = setInterval(cycle, 5000)을 다시 사용해야합니다.

모든 말 ... 거룩한 코드 배트맨! 코드를 극적으로 축소 할 수 있습니다! 여기에 내가 그것을했다 탄 (안된 내가 당신의 HTML을 가지고 있지 않기 때문에)입니다 :

var promoCycle = 0; 
$(function() 
{ 
    $('img.banner1, div.banner1').show(); 
    $('.nav ul li:nth-child(3)').addClass('child3'); 
    $('.nav ul li:nth-child(4)').addClass('child4'); 
    promoCycle = setInterval(showBanner, 5000); 
    $('a.banner1').mouseover(bannerHover(1)); 
    $('a.banner2').mouseover(bannerHover(2)); 
    $('a.banner3').mouseover(bannerHover(3)); 
    $('a.banner4').mouseover(bannerHover(4)); 
    $('a.banner5').mouseover(bannerHover(5)); 
    $('.banner .buttons').mouseout(function() 
    { 
     promoCycle = setInterval(showBanner, 5000); 
    }); 
}); 
function bannerHover(i) 
{ 
    return function() 
    { 
     bannerIndex = i; 
     showBanner(); 
     clearInterval(promoCycle); 
    }; 
} 
var bannerIndex = 0 
function showBanner() 
{ 
    var index = (bannerIndex++ % 5) + 1; 
    $('.banner .texts div[class*=banner],banner img[class*=banner]').hide(); 
    $('.banner .buttons ul li.on[class*=banner]').removeClass('on'); 
    $('.banner .buttons li.banner' + index).addClass('on'); 
    $('.banner img.banner'+index+',.banner .texts div.banner'+index).show(); 
} 

실제로 (단지 div의 모든 bannerX 요소) 더 나아가 <div banner="1">와 class="banner1"을 대체 할 것이다.

$("a[banner]").mouseover(function() 
{ 
    bannerIndex = parseInt($(this).attr("banner")); 
    showBanner(); 
    clearInterval(promoCycle); 
}); 

: 함수 생성자에 대한 필요없이 한 5 호출에에서 간단하게 할 것이다 $("a.bannerX").mouseover 결합, 예를 들어

$(".banner div[banner=1]"); 
$("a[banner]"); 
$(this).attr("banner"); 

:이 방법은 당신처럼 jQuery를 선택기를 사용할 수 있습니다

Answer 2

마지막 배너 이후에 개수를 재설정해야합니다. cycle()이 실행될 때마다 count 변수가 1 씩 증가합니다. 최종 배너를 표시 한 후에는 계속 증가하며 (7, 8 등) 어떤 조건도 만족하지 않습니다.

if (count == 6 { 
    ... your code ... 
    count = 1; 
} 

코드를 리팩토링하는 방법에 대해 살펴볼 것입니다.