Question

我的Javascript代码制作带有淡入效果的幻灯片显示有问题，我无法解决问题。新幻灯片似乎无法正常工作，我的意思是照片不会自动更改。

我正在关注youtube.com上某个人的视频教程中的指示，这对他来说很好，当我从他身上跟踪我所能做的一切时，我没有为他工作，因为它对他有用，我＆＃39;我没有找到我所犯的错误。

请帮我处理以下代码：滑块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>

Answer 1

您没有告诉您的代码是否完全没有运行，或者它是否在某些范围内运行。顺便说一下，您可以通过访问Web控制台来检查您的javascript代码是否有错误。只需按F12打开浏览器开发人员工具，然后查找“控制台”。

查看您的代码，看起来您没有正确填充Vect数组

改变这个：

Vect[1] = document.getElementById("Img" + (i + 1));

进入这个：

Vect[i] = document.getElementById("Img" + (i + 1));

javascript幻灯片显示无法正常工作？

1 个答案: