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]+">";
        }

标签： javascriptcarousel

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 按钮 yu 需要运行循环 backwords

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] + ">";
    }