[英]Change Button to Image Navigation Slider Javascript
我找到了有關使用JavaScript創建簡單幻燈片的教程。 所以我嘗試了,那是成功的。 但是導航是“播放/停止”的按鈕類型。
我想將其更改為一個名為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>
感謝您的回答
除了在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>
一個簡單的把戲
將暫停標簽設置為顯示: 放回去
<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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.