时间戳

首页 > 解决方案 > 如何在Javascript中为幻灯片同步上一个和下一个按钮？

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

问题描述

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

    <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>

标签： javascripthtmlcssslideshowslide

解决方案

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

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

您需要在之后分配它。

推荐阅读