Как сделать синхронизацию предыдущей и следующей кнопок для слайд-шоу в Javascript? - PullRequest
Новая
       75

Как сделать синхронизацию предыдущей и следующей кнопок для слайд-шоу в Javascript?

0 голосов
/ 02 мая 2020

Я не понимаю, почему, когда я нажимаю кнопку вперед, все в порядке. Когда я нажимаю предыдущую кнопку, все в порядке. но когда я смешиваю два, первое число случайно. 

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

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Вы ставите document.name.src = images[i]; до расчета индекса. Вы, вероятно, хотите, чтобы это было сделано после . Таким образом, изображение отражает ваш предыдущий щелчок кнопки, а не текущий.

0 голосов
/ 02 мая 2020

Вы присваиваете новое значение до изменения i.

С текущими логами c, если вы начнете с нажатия>, он покажет изображение 0 и установит счетчик на 1. Тогда не имеет значения, какую кнопку вы нажимаете, он покажет изображение 1 перед изменением значение.

Вам необходимо назначить его позже.

...