如何为 Javascript 中的幻灯片同步上一个和下一个按钮？

Question

我不明白为什么当我点击前进按钮时一切正常。当我单击上一个按钮时，一切正常。但是当我将两者混合时，我认为第一个数字是随机的。

    <body>
        <button id="back"> &lt; </button>
        <img  name="name" width="400px"; height="500px;">
        <button id="forward"> ></button>
        <script>
        
        
            var i = 0; //starting point
            var images = ["image1.png", "image2.png", "image3.png"]; 
            var forward = document.getElementById("forward");
            var back = document.getElementById("back"); 
            
            function next(){
                
                document.name.src = images[i];
                
                if(i < images.length - 1){
                       i++; 
                   }else i = 0; 
                
            }
            
            
        function before(){
            
            document.name.src = images[i];
            
            if(i == 0){
                i = images.length-1; 
            } else{
                i--;
            } 
        }
            
            
            
        forward.onclick = function(){ next()};
         back.onclick = function(){before()};   
            
            
         </script>
    </body>

Answer 1

在更改i 之前，您正在分配新值。

根据您当前的逻辑，如果您按 > 开始，它将显示图像 0 并将计数器设置为 1。然后无论您按哪个按钮，它都会在更改值之前显示图像 1。

之后需要分配。

Answer 2

您在计算索引之前输入了document.name.src = images[i];。您可能希望在之后完成。这样图片反映了您的 上一个 按钮单击而不是当前按钮。

如何为 Javascript 中的幻灯片同步上一个和下一个按钮？

How Do I Make A Previous and next Button synchronized For A Slideshow In Javascript?

html

javascript

css

slideshow

slide