jQuery滑块 - 最后到第一的过渡效果

Question

我创建了这个滑块（不想使用插件）：

function slider(sel, intr, i) {
  var _slider = this;
  this.ind = i;
  this.selector = sel;
  this.slide = [];
  this.slide_active = 0;
  this.amount;
  this.selector.children().each(function (i) {
    _slider.slide[i] = $(this);
    $(this).hide();
  })
  this.run();
}
slider.prototype.run = function () {
  var _s = this;
  this.slide[this.slide_active].show();
  setTimeout(function () {
    _s.slide[_s.slide_active].hide()
    _s.slide_active++;
    _s.run();
  }, interval);
}
var slides = [];
var interval = 1000
$('.slider').each(function (i) {
  slides[i] = new slider($(this), interval, i);
})

我遇到的问题是不知道如何在最后一张幻灯片（图片）之后，让它回到第一张幻灯片。现在，它只是隐藏和显示直到结束，如果没有图片，它就不会重新开始。

有人能帮我提供一个代码建议吗？使它获取滑块的长度（其中包含的图像数量），如果是最后一张幻灯片（图片），则返回到第一张幻灯片（图片）... 就像一个循环。

编辑：滑块标记

    <div class="small_box top_right slider">
        <img class="fittobox" src="img/home10.jpg" alt="home10" width="854" height="592">
        <img class="fittobox" src="img/home3.jpg" alt="home3" width="435" height="392">
        <img class="fittobox" src="img/home4.jpg" alt="home4" width="435" height="392">
    </div>

- user1617218

---

除非我漏看了什么：_s.slide_active ++; _s.slide_active = _s.slide_active％this.slide.length; - dualed

但是我已经在超时中有了_s.slide_active ++;，为什么要重复呢？ - user1617218

根据我的理解，您有不同的幻灯片彼此重叠。您正在按时间顺序隐藏幻灯片以显示其下方的幻灯片。在最后一张幻灯片的情况下，在一段时间后，您必须使第一张幻灯片出现而不是隐藏，并且当您进行转换（第一张幻灯片完全出现）时，使所有幻灯片出现在其下方并重复相同的顺序。 - Tarun

@fxg 那只是为了提供背景信息。 - dualed

当然，我把它放在编辑中。 - user1617218

Answer 1

请查看这个Fiddle链接，它将帮助您以循环方式创建滑块。如果滑块到达最后一张图片，它将从第一张图片重新开始。

var index = $selector.index();   
if (index == (length - 1)) {   
    $('img').first().removeClass('invisible').addClass('visible');  
}

我希望这能更好地帮助你。祝一切顺利。

- Karthi Keyan

---

谢谢，但这似乎适用于您的滑块...而不是我的代码。 - user1617218

Answer 2

我在这里为您创建了一个固定版本。

最简单的方法是在当前位置运行简单的数学操作

_s.slide_active++;

相反，我会得到_s.slide_active，加上1，然后通过模运算（%）将其除以总长度，得到余数：

_s.slide_active = (_s.slide_active + 1) % _s.slide.length;

- Barney

---

为了更好地说明它正在正确循环（我这里有一些“重复图像问题”），基于您的答案，这可能是一个更好的示例。 - MarcoK

@MarcoK 很好的观点 - 为相同宽度/高度的图像指定不同的主题。 - Barney

非常完美，非常感谢！一旦系统允许我，我会立即给予奖励 :) - user1617218

Answer 3

你需要在到达 length-1 后回到 0。 一种简单的方法是使用模运算：

_s.slide_active++;
_s.slide_active %= length;

- Petar Ivanov

---

我放置了这段代码，但第一张图片仍然“跳”到它，第二张幻灯片没有变化...谢谢。 - user1617218

Answer 4

未经测试但希望有帮助：

function slider(sel, intr , i){
   ...
   this.count = this.selector.children().length;
   this.run();
}

slider.prototype.run = function(){
    var _s = this;
    this.slide[this.slide_active].show();
    setTimeout(function(){
        _s.slide[_s.slide_active].hide()
        if(_s.slide_active == this.count)
             _s.slide_active = 0;  
        else
             _s.slide_active++;
        _s.run();
    }, interval);
}  

- M Rostami

---

它仍然停留在最后一张图像。 - user1617218