我的 Javascript 代码在制作具有淡入效果的幻灯片时出现问题，我无法解决该问题。新幻灯片似乎无法正常工作，我的意思是照片不会自动更改。
我按照 youtube.com 上某个人的视频教程的指示进行操作，这对他来说效果很好，当我按照他的指示进行操作时，id 对我来说并不像对他那样有用，我失败了找出只有我自己犯的错误。
请帮我编写以下代码: slider 1
var nrImg = 3; //The number of images.
var IntSeconds = 4; //Time delay to change the images.
function Load()
{
nrShown = 0; //The number of images VISIBLE.
Vect = new Array(nrImg + 10);
Vect[0] = document.getElementById("Img1");
Vect[0].style.visibility = "visible";
document.getElementById("S" + 0).style.visibility = "visible";
for (var i = 1; i < nrImg; i++)
{
Vect[1] = document.getElementById("Img" + (i + 1));
document.getElementById("S" + i).style.visibility = "visible";
}
document.getElementById("S" + 0).style.backgroundColor = "rgba(255, 255, 255, 0.90)";
document.getElementById("SP" + nrShown).style.visibility = "visible";
mytime = setInterval(Timer, IntSeconds * 1000);
}
function Timer()
{
nrShown++;
if (nrShown == nrImg)
nrShown = 0;
Effect();
}
function next()
{
nrShown++;
if (nrShown == nrImg)
nrShown = 0;
Effect();
clearInterval(mytime);
mytime = setInterval(Timer, IntSeconds * 1000);
}
function prev()
{
nrShown--;
if (nrShown == -1)
nrShown = nrShown - 1;
Effect();
clearInterval(mytime);
mytime = setInterval(Timer, IntSeconds * 1000);
}
function Effect()
{
for (i = 0; i < nrImg; i++)
{
Vect[i].style.opacity = "0";
Vect[i].style.visibility = "hidden";
/*document.getElementById("S" + i).style.visibility = "hidden";*/
document.getElementById("S" + i).style.backgroundColor = "rgba(0, 0, 0, 0.70)";
document.getElementById("SP" + nrShown).style.visibility = "visible";
}
Vect[nrShown].style.opacity = "1";
Vect[nrShown].style.visibility = "visible";
document.getElementById("S" + nrShown).style.backgroundColor = "rgba(255, 255, 255, 0.90)";
}
</script>
</head>
<body onLoad="Load()">
<div id="slider">
<div id="imgs">
<img id="Img3" src="images/3.jpg" />
<img id="Img2" src="images/2.jpg" />
<img id="Img1" src="images/1.jpg" />
</div>
<div id="Snav">
<div id="SnavUp">
<div id="Scircles">
<ul>
<li id="S0"></li>
<li id="S1"></li>
<li id="S2"></li>
</ul>
</div>
</div>
<div id="SnavMiddle">
<img id="Sleft" src="images/left.png" onClick="prev()" />
<img id="Sright" src="images/right.png" onClick="next()" />
</div>
<div id="SnavBottom">
<p id="SP0">Roger Federer 01</p>
<p id="SP1">Roger Federer 02</p>
<p id="SP2">Roger Federer 03</p>
</div>
</div>
</div>
</body>
</html>
最佳答案
您没有判断您的代码是否根本没有运行或者在某种程度上正在运行。顺便说一句，您随时可以通过访问 Web 控制台来检查 javascript 代码是否有错误。只需按 F12 打开浏览器开发人员工具并查找“控制台”。
查看您的代码，您似乎没有正确填充 Vect 数组
更改此:
Vect[1] = document.getElementById("Img" + (i + 1));
进入此:
Vect[i] = document.getElementById("Img" + (i + 1));
关于javascript 幻灯片无法正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28767969/