Question

我正在为网站制作一个简单的滑块。显然这是一项正在进行的工作，我还没有完成脚本或样式，但我遇到了一个问题。通过单击下一个按钮，我可以遍历所有图像，但是当我到达终点并尝试将其返回到第一个时，所有这些图像的数据幻灯片属性将重置为0并且所有幻灯片显示。我知道我可以通过使用.first（）函数解决这个问题，但我很想知道为什么会这样。它似乎没有意义，但我还是很新。这是一个演示：

http://codepen.io/heatherthedev/pen/tdibB/

编辑：

我确实希望确保数据幻灯片编号不会被重置，我打算将它们用于滑块中的导航元素。

Answer 1

您的$ firstSlide变量正在设置所有幻灯片＆＃34;数据幻灯片＆＃34;发生这种情况的原因是因为$('.slide').attr('data-slide', 0);将类.slide的所有元素上的所有数据幻灯片属性设置为0。

写这个的另一种方法是

$('.slide').data('slide',0);。

将该行更改为

var $firstSlide = $(holder).find('[data-slide=0]');

找到带有＆＃34; data-slide = 0＆＃34;的第一张幻灯片。值。

示例http://codepen.io/anon/pen/xoBaE

希望这有帮助！

Answer 2

＆＃34;当我到达终点并试图让它回到第一个时，所有这些数据的幻灯片属性都会重置为0＆＃34; - 这实际上并没有发生在最后;它是在您第一次切换幻灯片时发生的，因为这一行：

var $firstSlide = $('.slide').attr('data-slide', 0);

这是一个二传手;它会在每个元素的data-slide到.slide运行时设置0个自定义HTML属性，这是每次＆＃34; next＆＃34;单击按钮。

在查看代码时，我认为您正在使用jQ .data（）函数混合使用您创建的名为data-slide的自定义HTML属性。将数据附加到其运行的元素。

至于为什么每一张幻灯片都会在你结束时显示，这是因为你的条件有这条线...

$firstSlide.addClass('active');

...其中$firstSlide的值实际上是所有幻灯片的jQ集合 - 因此它们都显示为什么。您需要找到data-slide 0的元素并将其保存到$firstSlide，然后才能生效。

Answer 3

刚刚提出：

var $firstSlide = $('.slide').eq(0);

而不是：

var $firstSlide = $('.slide').attr('data-slide', 0);

data-slide属性正在重置，因为您在该行中这样说，然后您没有再次看到第一张幻灯片，因为未定义$firstSlide，所以在尝试运行else代码时，您会得到一个错误。

滑块问题 - 最后一张幻灯片上的奇怪重置

3 个答案: