Question

我创建了一个HTML文件，它使用java脚本显示随机显示在3个div标签中的图像。单击图像向左或向右移动。它工作正常，直到我在页面中使用单个幻灯片放映，但是当我在同一页面上尝试多个幻灯片时会产生问题。

以下是幻灯片放映的代码：

**<script>
currentIndx = 2;

MyImages=new Array();

MyImages[0]='1images2.jpeg';

MyImages[1]='1images3.jpeg';

MyImages[2]='1images4.jpeg';

MyImages[3]='artwork.jpg';

MyImages[4]='1images5.jpeg';

imagesPreloaded = new Array(4)

for (var i = 0; i < MyImages.length ; i++)

{
imagesPreloaded[i] = new Image(120,120)

imagesPreloaded[i].src=MyImages[i]
}

/* we create the functions to go forward and go back          */

function Nexter()

{

if (currentIndx<MyImages.length-1){
alert(currentIndx);
document.leftimg.src=document.middleimg.src
document.middleimg.src=document.rightimg.src
document.rightimg.src=imagesPreloaded[++currentIndx].src

}
else {
alert("In nexter else")
currentIndx=0
document.leftimg.src = document.middleimg.src

document.middleimg.src = document.rightimg.src

document.rightimg.src = imagesPreloaded[currentIndx].src

}

writeImageNumber();

}
function Backer()
{
if (currentIndx>0)
{

 --currentIndx; 

alert("In Backer If");

document.rightimg.src=document.middleimg.src

document.middleimg.src=document.leftimg.src

document.leftimg.src=imagesPreloaded[currentIndx].src

}

else 
{


  currentIndx = MyImages.length-1

  alert(MyImages.length +"else");

  document.rightimg.src = document.middleimg.src

  document.middleimg.src = document.leftimg.src

  document.leftimg.src = imagesPreloaded[currentIndx].src

}

writeImageNumber();

}

/*###### function to reload the images and text when refresh is pressed ##### */

function setCurrentIndex()
{
currentIndx=0;

document.theImage.src=MyImages[0];

document.form1.text1.value=Messages[0];

writeImageNumber();

}

</script>

<body onload="setCurrentIndex();automaticly()">

<!-- start of form for image slide show ####################### -->

<div id ="left" style="float:left"> 

<a href="#" onclick="Backer()" ><img src="1images2.jpeg" width="265" height="262" 
border="0" name="leftimg"></a>
</div>

<div id ="middle"  style="float:left">

<a href="#" onclick=""><img src="1images3.jpeg" width="265" height="262" 
 border="0"    name="middleimg"></a>
</div>

<div id ="right" class="compimg" style="float:left"> 
<a href="#" onclick="Nexter()" ><img src="1images4.jpeg"
width="265" height="262"  alt="" border="0"name="rightimg"></a>
</div> 

<!-- end of form for image slide show ####################### -->**



Any suggestions...

Answer 1

您尚未将脚本包装在任何javascript类（对象）中，因此您使用的所有变量都具有全局范围（页面级别）。如果你试图多次使用它，我猜你的变量已被覆盖了。

如果您发布关于如何在单页中创建多个幻灯片的HTML标记，您可以获得更好的答案...

Javascript多个幻灯片

1 个答案: