在两个图像之间切换

Switching between two images

本文关键字：图像 之间 两个      更新时间：2023-09-26

我有这个简单的代码

<a title="disable music" id="mute_link" name="mute_link"
    style="position:absolute;right:15px;top:15px;cursor:pointer;">
  <img src="images/icons/stopmusic.png"
       alt="stop playing music"
       name="music"
       onclick="document.images['music'].src='images/icons/stopmusicdis.png'">
</a>

我对此有个问题。我需要图像会改变每次点击后，这意味着我打开网站，我有那里的图像stopmusic.png。点击它后，我需要出现stopmusicdis.png。在第二次点击图像后，我需要回到stopmusic.png。有可能做到吗?

这是一个通用的解决方案。你只需要修改data-imgon和data-imgoff。

JsFiddle: http://jsfiddle.net/7Z4E5/

HTML: 

<a title="disable music" id="mute_link" name="mute_link">
     <img src="http://placehold.it/350x150" data-imgon="http://placehold.it/350x150" data-imgoff="http://placehold.it/150x350" alt="stop playing music" name="music" id="music"/>
</a>
CSS: 

#mute_link{position:absolute;right:15px;top:15px;cursor:pointer;}
JavaScript: 

$(function () {
    // Handler for .ready() called.
    $("#mute_link").on("click", function () {
        if ($("#music").data("imgon") === $("#music").attr("src")) {
            //Change to OFF
            $("#music").attr("src", $("#music").data("imgoff"));
        } else {
            //Change to on
            $("#music").attr("src", $("#music").data("imgon"));
        }
    });
});

把这段代码放到你的javascript中:

document.getElementById("mute_link").addEventListener("click", function() {
    var e = document.getElementsByName("music")[0];
    e.src = e.src.indexOf("stopmusic.png") == -1 ? 
            "images/icons/stopmusic.png":"images/icons/stopmusicdis.png"
});

下面是一些javascript代码http://jsfiddle.net/gc9sW/

通过element.getElementById("id")找到您的<img>标签，然后检查其src属性，并将其交换到o/

创建一个JavaScript函数并从onclick事件中调用

<img src="images/icons/stopmusic.png" alt="stop playing music" name="music" onclick="change_img()"
下面是你可以使用的函数: 
<script>
    function change_img(){
        if (document.getElementById("img").getAttribute("name") == "img1"){
            document.getElementById("img").src = "new url"
            document.getElementById("img").setAttribute("name", "img2")
        }else {
            document.getElementById("img").src = "old url"
            document.getElementById("img").setAttribute("name", "img1")
        }
    }
</script>

它变成另一个图像和后面

我来告诉你这个想法。使用jquery或javascript

  • 为每个图像添加点击事件。
  • 内部点击事件为第一个图像，改变图像为第二个图像
  • 内部点击第二个图像的事件，将图像更改为第一个图像

希望你能理解

的例子:html: 

 <div id="img"><img src="image1.jpg" alt="image1"></div>
jquery 

$("#img").click(function(){
  if($("img").attr('src')=="image1.jpg"){
    $("img").attr('src','image2.jpg');
  }
  else
  {
    $("img").attr('src','image1.jpg'); 
  }     
});

这只是一个例子

相关文章：