将按钮更改为图像导航滑块Javascript
问题描述:
我找到了一个关于使用JavaScript创建简单幻灯片的教程。所以我尝试它,它是成功的。但导航按钮是Play/Stop的按钮类型。将按钮更改为图像导航滑块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>
答
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);
}