讓我的橫幅幻燈片在播放完畢後重播

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 banner="1">取代class="banner1"（所有bannerX元素，而不僅僅是div的）。這樣，您就可以使用jQuery選擇，如：

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

例如，結合$("a.bannerX").mouseover將從5調用只是一個沒有必要的功能構造被簡化：

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

Answer 2

您需要重置最後一個橫幅後的計數。每次運行cycle()時，它都會將count變量加1。顯示最後一個橫幅後，它會不斷遞增（7,8等），這不符合您的任何條件。

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

我會考慮重構你的代碼，因爲你重複自己很多。