Question

我正在做这样的事情 -

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_js_prop

但是我想用点击时切换到另一个图像的图像替换按钮。换句话说，“播放”按钮将变为“暂停”按钮。

有许多教程只显示一个按钮，但是只要我添加更多按钮，新的按钮就不起作用。

任何帮助表示赞赏！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>


<script type="text/javascript">

function changeIt()
{
var theImg = document.getElementsByTagName('img')[0].src;

var x = theImg.split("/");
var t = x.length-1;
var y = x[t];

if(y=='btnPlay.gif')
{
document.images.PlayOrPause.src='btnPause.gif'
}
if(y=='btnPause.gif')
{
document.images.PlayOrPause.src='btnPlay.gif'
}



}

</script>

<a href="#" onclick="changeIt()"><img src='btnPause.gif' name='PlayOrPause' border='0' /></a>

Answer 1

使用输入类型图像

尝试此操作

<强> HTML

<input type="image" src="play.png" class="play" onclick="toggle(this);"/>

<强> CSS

.play, .pause {width:100px;height:100px;}

<强> JS

function toggle(el){
    if(el.className!="pause")
    {
        el.src='pause.png';
        el.className="pause";
    }
    else if(el.className=="pause")
    {
        el.src='play.png';
        el.className="play";
    }

    return false;
}

小提琴是here 。

Answer 2

swap : function(id) {
    var e = document.getElementById(id);
    e.className = (e.className == 'image1') 
        ? 'image2' 
        : 'image1';        
}

您可以创建一个检查当前类并切换它的函数。这是两个类具有不同背景图像的最简单示例。你可以在一个不同的函数中处理剩下的逻辑，管理玩家的“播放状态”，暂停等等。

制作JS按钮，在点击时切换图像

2 个答案: