將按鈕更改爲圖像導航滑塊Javascript

Question

我找到了一個關於使用JavaScript創建簡單幻燈片的教程。所以我嘗試它，它是成功的。但導航按鈕是Play/Stop的按鈕類型。

我想將其更改爲名爲play的圖像導航和另一個名爲stop的圖像。當我點擊播放圖像時，圖像停止會出現，播放圖像將被隱藏。當我點擊停止圖像時，會出現播放圖像並停止圖像。

這裏是我的JavaScript：

var interval = 2000; // You can change this value to your desired speed. The value is in milliseconds, so if you want to advance a slide every 5 seconds, set this to 5000. 
    var switching = setInterval("toggleSlide(true)", interval); 

    window.paused = false; 

    function toggleInterval() { 
     var button = document.getElementById("pauseButton"); 
     if(!window.paused) { 
      clearInterval(switching); 
      button.value = "Resume"; 
     } else { 
      switching = setInterval("toggleSlide(true)", interval); 
      button.value = "Pause"; 
     } 
     window.paused = !(window.paused); 
    } 

這裏是我的HTML（一）：

<div align="right"> 
    <input id="pauseButton" onclick="toggleInterval()" type="button" value="Pause" /> 
</div> 

這是我的HTML現在：

<div align="right"> 
    <img src="../asset/images/play.png" title="Play" id="pauseButton" onclick="toggleInterval()" /> 
    <img src="../asset/images/stop.png" style="cursor:pointer; display:none;" title="Stop" onclick="toggleinterval(true)" /> 
</div> 

感謝您的回答

Answer 1

而是在你button有img的元素，你可以用classes和background-image CSS工作。之後管理起來更容易，您只需設置您需要的課程，並且圖像將根據此更改。像這樣的東西可以讓你輕鬆切換圖像：

window.paused = true; 
 

 
// You can keep the same logic as with your button 
 
// but instead of changing value, you change the class 
 
// And in your css you assign different images to different classes 
 

 

 
function toggleInterval() { 
 
    var button = document.getElementById("pauseButton"); 
 
    if (!window.paused) { 
 
    
 
    button.className = 'resume'; 
 
    } else { 
 

 
    button.className = 'pause'; 
 
    } 
 
    window.paused = !(window.paused); 
 
}

#pauseButton { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-size: contain; 
 
} 
 
#pauseButton.pause { 
 
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqDrugj4g4aPOBxEXi7zv1zH_c1OXaaWbOg8HRkQuVDhb8LVn46PP8wTo') 
 
} 
 
#pauseButton.resume { 
 
    background-image: url('https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg') 
 
}

<div> 
 
    <div id="pauseButton" class="resume" onclick="toggleInterval()"></div> 
 
</div>

Answer 2

A simp le trick

設置暫停標籤顯示：block;並把它放在後面

<div align="right"> 
    <img src="../asset/images/play.png" style="position: relative; z-index: 1;" title="Play" id="pauseButton" onclick="toggleInterval()" /> 
    <img src="../asset/images/stop.png" style="position: absolute; z-index: 0;" title="Stop" onclick="toggleinterval(true)" /> 
</div> 

並且當您點擊它時從播放中移除不透明度。

function toggleInterval() { 
    var button = document.getElementById("pauseButton"); 
    if(!window.paused) { 
     clearInterval(switching); 
     button.value = "Resume"; 
     //here is the trick 
     button.style.opacity = 1; 
    } else { 
     switching = setInterval("toggleSlide(true)", interval); 
     button.value = "Pause"; 
     //here is the trick 
     button.style.opacity = 0; 
    } 
    window.paused = !(window.paused); 
}