Javascript - 用变量改变图像 [英] Javascript - Changing an image with variables
问题描述
我正在尝试制作幻灯片，但我遇到了一些困难。我已经搜索了这个问题，并阅读了大量的页面，但我仍然无法实现。我在我的头文件中完成了这一切，然后header.php将包含在任何页面中。我已经尝试将源代码设置为包含位置的字符串，之前创建一个图像，然后将其设置为该图像的源代码，然后尝试使用它来尝试使其工作。
奇怪的是，当我调用updateSlider（）函数时，即使我可以在屏幕上看到它，但是我的图像的源代码为null，之后当我设置它说，它有一个来源，但图像是相同的。
但目前我只是试图在单击按钮时更改图像，然后尝试进行幻灯片放映。这里是header.php代码，你可以看到我尝试过的一些不同的东西：
< ;! DOCTYPE html>
< html>
< head>
< style type =text / cssmedia =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;
函数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.htmlclass =logoid =ht> < img src =includes / images / mmSlideImage1.pngalt =Logowidth =970height =278/>< / a>
< button type =buttononclick =updateSlider（）>更新滑块< / button>
< div id =nav>
< a href = index.php class =navBarLink>主页< / a>
< a href = about.php class =navBarLink>关于< / a>
< a href = gallery.php class =navBarLink>图库< / a>
< a href = programs.php class =navBarLink>程序< / a>
< / div>
预先感谢您的帮助！
================================================ ==================================
更新代码：
<！DOCTYPE html>
< html>
< head>
< style type =text / cssmedia =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;
函数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.htmlclass =logoid =ht> < img src =includes / images / mmSlideImage1.pngalt =Logowidth =970height =278/>< / a>
< button type =buttononclick =updateSlider（）>更新滑块< / button>
简单。你正试图赋予一个锚点一个图像属性。给你的 img 一个 id 并在Javascript中修复它。例如，如果您给它一个currentSlideImage id ：
$（'＃currentSlideImage'）。attr（'src'，url2）;
顺便提一下，我建议您阅读 Unobstrusive Javascript 。
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!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>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!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>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
这篇关于Javascript - 用变量改变图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
