使用Javascript将一个图像更改为另一个图像时遇到一些问题。理想情况下，程序应该在单击时更改图像，但我相信命令的语法不正确。我的图像位于名为“images”的文件夹中，程序文件位于与“images”文件夹相同的文件夹中。我注意到的错误是，单击时图像会尝试更改，但更改源图像时出错。
我已经阅读了类似的问题，但就复杂性而言，答案是我的头脑。我正在阅读一个我想做的事情的例子，但我无法让我的代码工作，即使我几乎复制了整个代码。
的Javascript
function changeIMG() {
var image = document.getElementById("face");
if (image.src.match("off")) {
image.src = "images\on.png";
} else {
image.src = "images\off.png";
}}
HTML
<body>
<center>
<h3>Welcome to the game.</h3>
<br>
<img src="images\off.png" id="face" onClick="changeIMG()" height="250" width="250">
</center>
答案 0 :(得分：1)
使用images/on.png";代替images\on.png";
你的javascript功能运行良好。
function changeIMG() {
var image = document.getElementById("face");
if (image.src.match("off")) {
image.src = "http://dummyimage.com/100x100/000/fff&text=on";
} else {
image.src = "http://dummyimage.com/100x100/000/fff&text=off";
}}<center>
<h3>Welcome to the game.</h3>
<br>
<img src="http://dummyimage.com/100x100/000/fff&text=off" id="face" onClick="changeIMG()" height="250" width="250">
</center>
答案 1 :(得分：0)
以下是我之前改变图像的项目之一：
$(document).ready(function(){
var btnvalue
$("#next").click(function(){
btnvalue = $( this ).attr( "data-dir" );
if (btnvalue == 1)
{
$( this ).attr( "data-dir","2")
$( "ul li:nth-child(1)" ).css( "display", "none" );
$( "ul li:nth-child(2)" ).css( "display", "block" );
$("#image2").slideDown();
}
if (btnvalue == 2)
{
$( this ).attr( "data-dir","3")
$( "ul li:nth-child(2)" ).css( "display", "none" );
$( "ul li:nth-child(3)" ).css( "display", "block" );
$("#image3").slideDown( 1000, function() {
// Animation complete
});
}
if (btnvalue == 3)
{
$( this ).attr( "data-dir","4")
$( "ul li:nth-child(3)" ).css( "display", "none" );
$( "ul li:nth-child(4)" ).css( "display", "block" );
$("#image4").slideDown( 1000, function() {
// Animation complete
});
}
if (btnvalue == 4)
{
$( this ).attr( "data-dir","1")
$( "ul li:nth-child(4)" ).css( "display", "none" );
$( "ul li:nth-child(1)" ).css( "display", "block" );
$("#image1").slideDown( 1000, function() {
// Animation complete
});
}
})
// Previous
$("#prev").click(function(){
btnvalue = $("#next").attr( "data-dir" );
if (btnvalue == 2)
{
$("#next").attr( "data-dir","1")
$( "ul li:nth-child(2)" ).css( "display", "none" );
$( "ul li:nth-child(1)" ).css( "display", "block" );
$("#image1").slideDown( 1000, function() {
// Animation complete
});
}
if (btnvalue == 3)
{
$("#next").attr( "data-dir","2")
$( "ul li:nth-child(3)" ).css( "display", "none" );
$( "ul li:nth-child(2)" ).css( "display", "block" );
$("#image2").slideDown( 1000, function() {
// Animation complete
});
}
if (btnvalue == 4)
{
$("#next").attr( "data-dir","3")
$( "ul li:nth-child(4)" ).css( "display", "none" );
$( "ul li:nth-child(3)" ).css( "display", "block" );
$("#image3").slideDown( 1000, function() {
// Animation complete
});
}
if (btnvalue == 1)
{
$("#next").attr( "data-dir","4")
$( "ul li:nth-child(1)" ).css( "display", "none" );
$( "ul li:nth-child(4)" ).css( "display", "block" );
$("#image4").slideDown( 1000, function() {
// Animation complete
});
}
})
})button{
height : 17px;
width : 60px;
}
#slider-nav{
color : red;
padding-top : 0em;
}
#next{
background-color : red;
}
#prev{
background-color : yellow;
}
.slider{
width : inherit;
height : 300px;
overflow : hidden
}
.slider ul{
width : 10000px;
list-style : none;
}
.slider li {
float : left
}
.slider ul li:nth-child(1){
position:absolute;
width:600px;
height:200px;
z-index:15;
top:50%;
left:50%;
margin:-100px 0 0 -150px;
}
.slider ul li:nth-child(2){
position:absolute;
width:600px;
height:200px;
z-index:15;
top:50%;
left:50%;
margin:-100px 0 0 -150px;
}
.slider ul li:nth-child(3){
position:absolute;
width:600px;
height:200px;
z-index:15;
top:50%;
left:50%;
margin:-100px 0 0 -150px;
}
.slider ul li:nth-child(4){
position:absolute;
width:600px;
height:200px;
z-index:15;
top:50%;
left:50%;
margin:-100px 0 0 -150px;
}
.slider ul li:nth-child(2){
display : none
}
.slider ul li:nth-child(3){
display : none
}
.slider ul li:nth-child(4){
display : none
}
.slider {
border : 2px solid
}
body{
width : 600px
}<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src='script.js'></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class = "slider">
<ul>
<li>
<!-- You can change this images if you want in a seperate document by forking my begginer progect-->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdJA38xKrGuTdclgbe0-zgfEaiJELl9nVWH2vGTi4PeRhnLW6EiQ" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image1">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiXFcdb29GcvK2CmKx07wuU07Ceiwwwqp9Uth1fUZovELuGVqDNnPR9A" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image2">
</li>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8o6qWq__fEP1-HaIEc28-vl1YWPyKgP0FxewzfK5PYCcgUo23Ba0M4gs" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image3">
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQfPNnAdm3ejpo5SE6r4Sd9Y0icOCscELCrs8RWSpLCb76sQ5bATzydvw" style="border-style: none; width: 200px; height: 200px; margin-left: -25px;margin-top: -25px;" id = "image4">
</li>
</ul>
</div>
<div id = "slider-nav">
<button data-dir ="prev" id = "prev">previous</button>
<button id = "next" data-dir = "1" >next</button>
</div>
</body>
</html>