添加切換暫停/播放功能到我的圖片幻燈片

我對此非常新。我發現了一些簡單的幻燈片劇本。同樣的海報提供了更多的腳本添加上一頁&下一步按鈕到他的腳本。這一切都很好，我喜歡它。但我想添加一個暫停按鈕，單擊後會停止幻燈片播放，再次單擊時重新啓動它。我對這個按鈕的外觀不感興趣，只是想讓這個功能切換。我創建了我的按鈕，並將其放置在我想要的位置，並在div中將其稱爲「pauseButton」。我沒有使用任何特定的「插件」，如「循環」，只是普通的jQuery（我猜）。我花了4天的時間在網上尋找答案，雖然一些例子可能已經奏效，但我不夠聰明，不知道如何調整它以適合我的腳本。我只需要知道究竟要添加到這個（&哪裏），使其工作：添加切換暫停/播放功能到我的圖片幻燈片

<script type="text/javascript" src="../js/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    var flag = true; 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function(){ 
    if(flag){ 
    $('.fadein :first-child').fadeOut() 
    .next('img').fadeIn() 
    .end().appendTo('.fadein');}, 
    3000); 
} 
}); 
    $(function() { 
     $('.fadein img:gt(0)').hide(); 
     $('.nextButton').on('click', function() { 
      $('.fadein :first-child').fadeOut() 
       .next('img').fadeIn() 
       .end().appendTo('.fadein'); 
     }); 
     $('.previousButton').on('click', function() { 
      $('.fadein :last-child').fadeIn() 
       .insertBefore($('.fadein :first-child').fadeOut()); 
     }); 
    $('.pauseButton').click(function(){ 
     flag = !flag; 
     }); 
}); 
</script>

這裏是整個頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Thirteen Pine</title> 

<script type="text/javascript" src="../js/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    var flag = true;   
    $('.fadein img:gt(0)').hide(); 
    setInterval(function(){ 
    if(flag){      
    $('.fadein :first-child').fadeOut() 
     .next('img').fadeIn() 
     .end().appendTo('.fadein');}, 
    3000); 
    } 
}); 
    $(function() { 
     $('.fadein img:gt(0)').hide(); 
     $('.nextButton').on('click', function() { 
      $('.fadein :first-child').fadeOut() 
       .next('img').fadeIn() 
       .end().appendTo('.fadein'); 
     }); 
     $('.previousButton').on('click', function() { 
      $('.fadein :last-child').fadeIn() 
       .insertBefore($('.fadein :first-child').fadeOut()); 
     }); 
     $('.pauseButton').click(function(){ 
      flag = !flag; 
     }); 

}); 
</script> 

<style type="text/css"> 
.fadein { position:relative; width:450px; height:275px; } 
.fadein img { position:absolute; left:0; top:0; } 

#showcontainer { 
    width: 530px; 
    height: 315px; } 
#btn1 { 
    float: left; 
    width: 40px; 
    height: 80px; } 
#show { 
    float: left; 
    width: 450px; 
    height: 275px; } 
#btn2 { 
    float: left; 
    width: 40px; 
    height: 80px; } 
#btn3 { 
    width: 80px; 
    height: 30px; } 

.nextButton, .previousButton, .pauseButton { cursor: pointer } 

</style> 
</head> 
<body> 
<div id="showcontainer"> 
    <div id="btn1"><img src="../images/btn_prev.png" width="40" height="80" vspace="100" class="previousButton"/></div> 
    <div id="show" class="fadein"> 
     <img src="../gallery/slide/slide1.png" width="450" height="275" /> 
     <img src="../gallery/slide/slide2.png" width="450" height="275" /> 
     <img src="../gallery/slide/slide3.png" width="450" height="275" /> 
     <img src="../gallery/slide/slide4.png" width="450" height="275" /> 
     <img src="../gallery/slide/slide5.png" width="450" height="275" /> 
     <img src="../gallery/slide/slide6.png" width="450" height="275" /> 
     <img src="../gallery/slide/slide7.png" width="450" height="275" /> 
     <img src="../gallery/slide/slide8.png" width="450" height="275" />   
    </div>  
    <div id="btn2"><img src="../images/btn_next.png" width="40" height="80" vspace="100" class="nextButton"/></div><br /> 
    <div id="btn3"><img src="../images/btn_pause.png" width="80" height="30" class="pauseButton"/></div> 
</div>

來源

2014-03-02 Deckster

歡迎來到Stack Overflow。請[編輯]你的問題，並添加一些HTML來構建一個工作示例。你也可以提供一個鏈接到[jsfiddle]（http://jsfiddle.net）。 – simbabque

我發現共享此代碼的海報在一年內還沒有上線，所以我不能只問他要做什麼。無論如何，他看起來還是新手。我將不勝感激任何幫助！謝謝！ – Deckster

發佈HTML標記！我猜你正在使用HTML代碼...你的評論如何與@simbabque以前的評論相關？ –

你可以添加一個標誌變量，只有執行您setInterval回調內部的主代碼，如果這是真的：

$(function(){ 
    var flag = true; 
    $('.fadein img:gt(0)').hide(); 
    setInterval(function(){ 
    if(flag){ 
    $('.fadein :first-child').fadeOut() 
     .next('img').fadeIn() 
     .end().appendTo('.fadein');}, 
    3000); 
    } 
});

然後點擊處理程序綁定到你的暫停按鈕用來切換標誌：

$('#my-button').click(function(){ 
    flag = !flag; 
});

來源

2014-03-02 14:50:08

看起來簡單高效+1 –

我打算建議同樣的事情，但想等待一個工作示例。 – simbabque

@simbabque我不怪你，但我在機場，真的很無聊:) –

添加切換暫停/播放功能到我的圖片幻燈片

回答

相關問題