Question

我正在尝试使用Javascript制作图像幻灯片。我将发布整个代码以使其清晰。我正在制作图像幻灯片。当按下按钮时它应该交换图像。

  <!DOCTYPE HTML>
    <html>
    <head>
    <!--The 6th page in the learning process-->
      <title>
        T6
    </title>

    <style>
        button#prev{
            margin-left:45%;
        }
        button{
            letter-spacing: 3px;
            font-weight: 700;
            }
        #mainImg{
            height:480px;   
            width:640px;    
            margin-left:24%;    
            border:8px outset;  
        }
    </style>
    <script>

    //This pre-loads the images.
    //This creates the image array.
    var imag=[];
    for (var i=0; i<4; i++) {
    //This makes four new image objects in the imag array.      
    imag[imag.length]=new Image();
    };
    //This provides the image URL.
    imag[0].src="file:///D:/Sites/T6/1.jpg";
    imag[1].src="file:///D:/Sites/T6/2.jpg";
    imag[2].src="file:///D:/Sites/T6/3.jpg";
    imag[3].src="file:///D:/Sites/T6/4.jpg";
    //This creates the variable responsible for change.
    //The variable is global so that both functions can access it.
    var Chng=-1;
    //Chng variable is initialized at -1 so that it complies with the array indexes.
    //This is the function that shows the previous image.
    //It is invoked by the #prev button.
    function PrevFnc(){
        switch(Chng){
            //This makes sure that the variable will loop from 0 to 4.
            //If the Chng variable becomes -1, this statement makes it 3 again.
            case -1:
                Chng=3;
                break;
            default:
                Chng--;
                break;
        //This changes the src of the #mainImg to the src of the current image object.
        document.getElementById("mainImg").src=imag[Chng].src;
        }
    }
    function NextFnc(){
        switch(Chng){
            //This makes sure that the variable will loop from 0 to 4.
            //If the Chng variable becomes 4, this statement makes it 0 again.
            case 4:
                Chng=0;
                break;
            default:
                Chng++;
                break;
        //This changes the src of the #mainImg to the src of the current image object.
        document.getElementById("mainImg").src=imag[Chng].src;
        }
    }
   </script>
   </head>

   <body>
    <div id="wrapper">
        <img id="mainImg" src="">
    </div>
    <!--These are for next and previous.-->
    <button id="prev" onclick="PrevFnc()"><==</button>
    <button id="next" onclick="NextFnc()">==></button>
    </body>
    </html>

问题是单击按钮时没有任何反应。我还搜索了另一个这样的帖子，但它们包含明显的错误。我不知道这段代码有什么问题。代码加载了提供详细信息的注释。请告诉我我做错了什么。:-)。

Answer 1

我指出了代码中存在的一些基本错误：

1。您必须将您的javaScript代码保存在 script 标记内

2。无论您在默认语句后的开关案例中写什么都不会被执行。

就是这样！您的代码现在可以完美运行。

switch(val){
    case 1:
        // do your stuff
        break;

    case 2:
        // do other stuff
        break;

    default :
        // if you do nothing this will do rest
        break;

    //now whatever you do doesn't matter. It won't do anything
}

jsFiddle

Answer 2

<head>
    <title>Change image on click</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="image_one">
        <img src="1.jpg" id="img_id" height="400px" width="200px">
    </div>

    <button type="button" onclick="myfxn()">Change Image</button>

    <p id="para"></p>
    <script>

        var i = 1;
        function myfxn(){


                i++;

                document.getElementById("para").innerHTML = i;

                if(i<=5){
                document.getElementById("img_id").src = i+".jpg";
                }
                else{
                document.getElementById("para").innerHTML = "Click again to start from the beginning.";
                         i = 0;
                }




        }

    </script>
</body>

在Javascript中制作简单的图像幻灯片

2 个答案: