Question

我试图构建一个非常基本的滑块。我设法创造了一些东西，但当我试图从一张幻灯片转换到另一张幻灯片时，我陷入困境。我在想我的代码可以工作，但事实并非如此，我不明白为什么。

这是我问题的相关部分：

我已经定义了一个滑块：

Debug.tick()
Debug.tock()

这确实有效。现在我尝试添加一个函数，在单击时增加或减少滑块变量。

var carrousel = document.getElementById('carrouselcontainer');

var slide1 = document.createElement('div');
slide1.className = 'slide1';

var slide2 = document.createElement('div');
slide2.className = 'slide2';

var slide3 = document.createElement('div');
slide3.className = 'slide3';

var slider = [slide1, slide2, slide3]

carrousel.appendChild(slider[0]);

但是当我点击var backButton = document.getElementById('backButton'); var forwardButton = document.getElementById('forwardButton') function forward() { slider++ } forwardButton.addEventListener('click', forward)元素时，没有任何反应。我知道forwardButton正在运行，因为我在其上尝试了eventListener消息，当我点击它时它会起作用。我在这里做错了什么？

Answer 1

增加数组不会起作用，只会产生错误。

forward()应该删除卡鲁塞尔的实际孩子添加一个新的子项，其值为slider数组的下一个元素：

引入currentSlide数字变量以指示当前显示的索引，并在forward()中将其递增。

var currentSlide = 0;
...
carrousel.appendChild(slider[currentSlide]);
...

function forward() {

  carrousel.removeChild(slider[currentSlide++]);
  if (currentSlide >= slider.length){
     currentSlide = 0; 
  }
  carrousel.appendChild(slider[currentSlide]);
}

Answer 2

您需要某种索引来从阵列中获取某些内容：

＆＃13;

var forwardButton = document.getElementById('forwardButton');
var result = document.getElementById('carrouselcontainer');
var sliderIndex = 0;


var slider1 = document.createElement("div");
slider1.innerHTML = "item 1";
var slider2 = document.createElement("div");
slider2.innerHTML = "item 2";
var slider3 = document.createElement("div");
slider3.innerHTML = "item 3";

var slider = [slider1, slider2, slider3];
result.appendChild(slider[sliderIndex]);

function forward() {
  result.removeChild(slider[sliderIndex]);
  sliderIndex = (sliderIndex + 1) % slider.length;
  result.appendChild(slider[sliderIndex]);
}

forwardButton.addEventListener('click', forward);

＆＃13;

<button id="forwardButton">Increment</button>
<div id="carrouselcontainer"></div>

＆＃13;

Answer 3

您必须替换元素，只增加元素不起作用：

我添加了一个计数器＆＃34; silderPos＆＃34;到你的脚本，所以每次点击都可以增加一个。

如果它大于2，它将通过模运动返回到0。

我将carrouselElement设为全局，以便您的点击脚本可以直接访问该元素。

通过这些改变，我现在可以通过你所有的元素。

请在此处找到修改后的源代码：

var carrouselElement;
var sliderPos = 0;
function carrousel()
{
    carrouselElement = document.getElementById('carrouselcontainer');

    var slide1 = document.createElement('div');
    slide1.className = 'slide1';

    var slide2 = document.createElement('div');
    slide2.className = 'slide2';

    var slide3 = document.createElement('div');
    slide3.className = 'slide3';

    var slider = [slide1, slide2, slide3]

carrouselElement.appendChild(slider[0]);

    var backButton = document.getElementById('backButton');
    var forwardButton = document.getElementById('forwardButton')

function forward() {
        carrouselElement.lastChild.remove();
        sliderPos++;
        sliderPos = sliderPos % 3;
        carrouselElement.appendChild(slider[sliderPos]);
    }

    /*backButton.addEventListener('click', back)*/
    forwardButton.addEventListener('click', forward)

}

window.addEventListener('load', carrousel);

为什么我的变量没有递增？

3 个答案: