javascript - 使用 Javascript 将图像替换为下一张图像和上一张图像

Question

我正在构建一个轮播，似乎不知道如何用下一张图像和上一张图像替换当前图像。我附上了一个代码笔和我想要实现的目标的屏幕截图。

代码笔: https://codepen.io/anon/pen/bmQjRB

JS:

      const img_con = document.getElementById('img-con');
    const img_con1 = document.getElementById('img-con-1');
    const img_con2 = document.getElementById('img-con-2');
    	 const next = document.getElementById('next');
    	 const prev = document.getElementById('prev');
    
    	  const images = ['https://images.unsplash.com/photo-1506126483163-f4d1558dbf85?ixlib=rb-0.3.5&q=85&fm=jpg', 'https://images.unsplash.com/photo-1506252374453-ef5237291d83?ixlib=rb-0.3.5&q=85&fm=jpg', 'https://images.unsplash.com/photo-1525183995014-bd94c0750cd5?ixlib=rb-0.3.5&q=85&fm=jpg']
    
    	  let i = images.length;
    
        next.onclick = ()=> {
        	 i = (i<images.length) ? (i= i+1) : (i=1);
        	 img_con.innerHTML = "<img class='img' src="+images[i-1]+">";
        }
        
        prev.onclick = ()=> {
        	 i = (i<images.length+1 && i>1) ?(i= i-1):(i=images.length);
        	 img_con.innerHTML = "<img class='img' src="+images[i-1]+">";
        }

Answer 1

我已更改图像数组，以按适当的顺序显示图像。

const images = ['https://images.unsplash.com/photo-1525183995014-bd94c0750cd5?ixlib=rb-0.3.5&q=85&fm=jpg',
        'https://images.unsplash.com/photo-1506126483163-f4d1558dbf85?ixlib=rb-0.3.5&q=85&fm=jpg',
        'https://images.unsplash.com/photo-1506252374453-ef5237291d83?ixlib=rb-0.3.5&q=85&fm=jpg'
]

您还需要运行 for 循环来检查索引。我正在附加一个完整的工作代码，用于单击下一个按钮。

let i =0;
next.onclick = () => {
        let temp = images[0];
        for (let index = 0; index < images.length; index++) {


            images[index] = images[index + 1];
            if (index === images.length-1 ) {

                images[index] = temp;
            }

        }

        img_con1.innerHTML = "<img class='img' src=" + images[i] + ">";
        img_con.innerHTML = "<img class='img' src=" + images[i + 1] + ">";
        img_con2.innerHTML = "<img class='img' src=" + images[i + 2] + ">";
    }

对于 pre 按钮，您需要运行循环后台词

let j = 0;
    prev.onclick = () => {

        let temp = images[images.length-1];
        for (let index = images.length-1; index >=0; index--) {


            images[index] = images[index - 1];
            if (index === 0 ) {
                console.log(index);
                images[index] = temp;
            }

        }
        img_con1.innerHTML = "<img class='img' src=" + images[j] + ">";
        img_con.innerHTML = "<img class='img' src=" + images[j + 1] + ">";
        img_con2.innerHTML = "<img class='img' src=" + images[j + 2] + ">";
    }