Javascript Onclick从一个图像切换到两个图像，然后返回到一个图像
尝试找出如何从一个图像切换到两个图像，然后使用onlick返回到一个图像 到目前为止，我有下面的作品没有问题，切换到一个图像，并返回到原始图像。最终，我尝试将第一个onclick事件垂直设置为两个图像，然后再次单击返回第一个图像Javascript Onclick从一个图像切换到两个图像，然后返回到一个图像,javascript,html,function,onclick,image,Javascript,Html,Function,Onclick,Image,尝试找出如何从一个图像切换到两个图像，然后使用onlick返回到一个图像 到目前为止，我有下面的作品没有问题，切换到一个图像，并返回到原始图像。最终，我尝试将第一个onclick事件垂直设置为两个图像，然后再次单击返回第一个图像 var play = false; function toggle() { var image = document.getElementById('image') var scan = document.getElementBy
var play = false;
function toggle() {
var image = document.getElementById('image')
var scan = document.getElementById('scan');
play = !play;
if (play) {
image.src = "pause.png";image.width="182";image.height="182";image.border="0";
scan.play();
}
else {
image.src = "play.png";image.width="182";image.height="182";image.border="0";
scan.pause();
}
}
<a href="javascript:void(0)"><img onclick="toggle()" id="image" src="play.png" alt="image" width="182" height="182" style="margin:auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0;"></a>
这应该可以很好地工作，除了从javascript中去掉宽度、高度和边框，它们没有改变，为什么要在那里使用它，并冒着浏览器崩溃的风险 我只是很快地把它放在一起测试，效果很好。。我已经注释掉了scan.play和pause，当然，但我假设您已经检查了浏览器中的控制台，看看这些是否抛出任何错误 我取出
cursor=pointeredit:删除的源代码块未达到问题的目标<!doctype html>
<html>
<head>
<script type="text/javascript">
var play = true;
function toggle() {
//var scan = document.getElementById('scan');
var playpause = document.getElementById('playpause');
var btnplay = playpause.getElementsByClassName('play');
var btnpause = playpause.getElementsByClassName('pause');
play = !play;
if (play) {
btnplay[0].className = 'btn play active';
btnpause[0].className = 'btn pause';
//scan.play();
}
else {
btnplay[0].className = 'btn play';
btnpause[0].className = 'btn pause active';
//scan.pause();
}
}
</script>
<style>
.btn {
width: 182px;
height: 182px;
cursor: pointer;
position: absolute;
visibility: hidden;
}
.btn.active { visibility: visible; }
.btn.play { background: url('play.png') no-repeat 0 0; }
.btn.pause {
background: url('pause.png') no-repeat 0 0;
padding: 182px 0 0 0;
}
</style>
</head>
<body>
<div id="playpause">
<div class="btn play active" onclick="toggle()">
</div>
<div class="btn pause" onclick="toggle()">
<img src="other.png" alt="other" />
</div>
</body>
</html>
var play=true；
函数切换（）{
//var scan=document.getElementById（'scan'）；
var playpause=document.getElementById（'playpause'）；
var btnplay=playpaise.getElementsByClassName（'play'）；
var btnpause=playpause.getElementsByClassName（'pause'）；
玩耍=！玩耍；
如果（玩）{
btn播放[0]。类名='btn播放活动'；
btn暂停[0]。类名称='btn暂停'；
//scan.play（）；
}
否则{
btn播放[0]。类名='btn播放'；
btnpause[0]。类名称='btn暂停活动'；
//scan.pause（）；
}
}
.btn{
宽度：182px；
高度：182px；
光标：指针；
位置：绝对位置；
可见性：隐藏；
}
.btn.active{可见性：可见；}
.btn.play{background:url（'play.png'）不重复0；}
.btn.pause{
背景：url（'pause.png'）不重复0；
填充：182px0；
}