Question

我找到了一个关于使用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>

感谢您的回答

Answer 1

您可以使用img和button css，而不是在classes中使用background-image元素。之后管理起来更容易，您只需设置所需的课程，图像就会根据此变化。这样的东西可以让你轻松切换图像：

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

一个简单的技巧

将pause标记设置为display：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>

单击时从Play中删除不透明度。

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);
}

将按钮更改为图像导航滑块Javascript

2 个答案: