我如何在Javascript中使上一个和下一个按钮同步的幻灯片?

问题描述 投票:0回答:2

我不明白为什么当我点击前进按钮时,一切正常。但当我把这两个按钮混合在一起时,第一个数字是随机的,我想。

    <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>
javascript html css slideshow slide
2个回答
0
投票

你正在分配新的值 之前 变化 i.

按照你现在的逻辑,如果你一开始按>就会显示图像0,并将计数器设为1,那么不管你按哪个按钮,它都会先显示图像1再改值。

你需要事后再进行分配。


0
投票

你把 document.name.src = images[i]; 计算指数之前。你可能想做的是 之后. 这种方式的图片反映了你的 以前 点击按钮而不是当前的按钮。

© www.soinside.com 2019 - 2024. All rights reserved.