使用javascript中的数组单击更改图像 [英] Changing images using on click with arrays in javascript
本文介绍了使用javascript中的数组单击更改图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我试图点击图片时，图片会改变，但是数组中的下一张图片不会显示。 <！doctype html>
< html>
< head>
< title>
幻灯片
< / title>
< script type =text / javascript>
函数nextslide（）{
var images = new Array（）
images [0] =home.jpg
images [1] =left.jpg
images [2] =right.jpg
var currentpic = 0
var lastpic = images.lenth-1;
if（currentpic = lastpic）
{
currentpic = 0;
document.getElementById（'slide'）。src = images [currentpic];
} else
{
currentpic ++;
document.getElementById（'slide'）。src = images [currentpic];
}
}
< / script>
< / head>
< body>
< img src =home.jpgid =slideonclick =nextslide（）>
< / body>
< / html>
帮助将不胜感激。
感谢您的帮助。
解决方案
您的代码有几个错误。这里是固定版本：
<！doctype html>
< html>
< head>
< title>幻灯片< / title>
< script type =text / javascript>
var images = new Array（）;
images [0] =home.jpg;
images [1] =left.jpg;
images [2] =right.jpg;
var currentpic = 0;
var lastpic = images.length-1;
函数nextslide（）
{
if（currentpic == lastpic）
{
currentpic = 0;
document.getElementById（'slide'）。src = images [currentpic];
}
else
{
currentpic ++;
document.getElementById（'slide'）。src = images [currentpic];
}
}
< / script>
< / head>
< body>
< img src =home.jpgid =slideonclick =nextslide（）>
< / body>
< / html>
有什么不对？
-
var lastpic = images.lenth-1; 您错过了gin长度。 -
if（currentpic = lastpic）要检查var1是否与var2相同，您需要使用== 代替= - 您缺少一些分号。 b
- 您应该声明
currentpic，图片和lastpic
< h1>尝试自我调试
总是检查浏览器的开发者控制台是否有错误。
When ever I try to click on the image, the image changes but the next image in the array is not displayed
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
function nextslide(){
var images = new Array()
images[0]= "home.jpg"
images[1]= "left.jpg"
images[2]= "right.jpg"
var currentpic=0
var lastpic= images.lenth-1;
if (currentpic =lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
Help would be greatly appreciated. Thank you for the help.
解决方案
There are several things wrong with your code. Here is the fixed version:
<!doctype html>
<html>
<head>
<title>slides</title>
<script type="text/javascript">
var images = new Array();
images[0] = "home.jpg";
images[1] = "left.jpg";
images[2] = "right.jpg";
var currentpic = 0;
var lastpic = images.length-1;
function nextslide()
{
if (currentpic == lastpic)
{
currentpic = 0;
document.getElementById('slide').src = images[currentpic];
}
else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
What's wrong?
var lastpic= images.lenth-1;You're missing aginlength.if (currentpic =lastpic)To check ifvar1is the same asvar2, you need to use==instead of=- You're missing a couple of semicolons.
- You should declare
currentpic,images, andlastpicoutside of your function to make it actually set the image as the next image.
To try and debug yourself
Always check your browser's developer console for errors.
这篇关于使用javascript中的数组单击更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
