Javascript - 使用变量更改图像

Javascript - Changing an image with variables

本文关键字：图像 变量 Javascript      更新时间：2023-09-26

我正在尝试创建幻灯片，但我遇到了一些困难。我已经用谷歌搜索了这个问题并阅读了大量页面，但我仍然无法让它工作。我在我的标题中完成了这一切，然后标题.php将包含在任何页面上。我尝试将源设置为包含位置的字符串，之前创建一个图像，然后将其设置为该图像的源，只是尝试奇怪的事情试图让它工作。

奇怪的是，当我调用 updateSlider（） 函数时，即使我可以在屏幕上看到它，我的图像的来源也是空的，之后当我设置它时，它说有一个来源，但图像是相同的。

但目前我只是尝试在单击按钮时更改图像，然后我将尝试制作幻灯片。这是标题.php代码，您可以看到我在其中尝试过的一些不同内容：

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css" media="all">@import "./includes/layout.css";</style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">          
      </script>
      <script>
         var slideImages = new Array("includes/images/mmSlideImage1.png",    
            "includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
        var slideImage = newImage();
        slideImage.src = slideImages[0];
        pic = document.createElement("img");
        pic.setAttribute("src", "includes/images/mmSlideImage2.png");
        pic.setAttribute("alt", "No Image");
        var url2 = "includes/images/mmSlideImage2.png";
        var img2 = new Image();
        img2.src = url2;
        function updateSlider() {
            console.log(document.getElementById("ht").getAttribute("src"));
            document.getElementById("ht").setAttribute("src", img2.src);
            console.log(document.getElementById("ht").getAttribute("src"));
        }
    </script>
</head>
    <body>
        <a href="index.html" class="logo" id="ht"> <img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" /></a>
        <button type="button" onclick="updateSlider()">Update Slider</button>
        <div id="nav">
            <a href=index.php class="navBarLink">Home</a>
            <a href=about.php class="navBarLink">About</a>
            <a href=gallery.php class="navBarLink">Gallery</a>   
            <a href=programs.php class="navBarLink">Programs</a>    
        </div>

提前感谢您的任何帮助！

=====================================================================================================================================================================================================================================================

===

更新的代码：

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css" media="all">@import "./includes/layout.css";</style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
      </script>
      <script>
         var url2 = "includes/images/mmSlideImage2.png";
         function updateSlider()  {
             console.log(document.getElementById("ht").getAttribute("src"));
             $('ht').attr('src', url2);
             console.log(document.getElementById("ht").getAttribute("src"));
         }
      </script>
   </head>
   <body>
        <a href="index.html" class="logo" id="ht"> <img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" /></a>
        <button type="button" onclick="updateSlider()">Update Slider</button>

很简单。您正在尝试为定位点提供图像属性。给你的img一个id，并在Javascript中修复它。例如，如果您给它一个"当前幻灯片图像"id：

$('#currentSlideImage').attr('src', url2);

顺便说一句，我建议你读一读Unobstrusive Javascript。

我不确定当您只是更改图像标签的 SRC 时，为什么要使用新图像。

最简单的方法是使用 jquery 代码

$('#imgTagID').attr('src', url2);

或在 JavaScript 中 

document.getElementById("imgTagID").src = url2;

在这里，你只是缺少 id jquery 中的标签，我刚刚尝试过使用在线图像

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider()  {
    //console.log(document.getElementById("ht").getAttribute("src"));
    $('#ht').attr('src', url2);
    //console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>
相关文章：