jQuery 滑块 - 最后到第一个过渡答案

【问题标题】：jQuery slider - last to first transitionjQuery 滑块 - 最后到第一个过渡
【发布时间】：2013-03-08 14:07:55
【问题描述】：

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

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);
})

我的问题是我不知道如何在最后一张幻灯片（图片）之后获取它，它又回到了第一张幻灯片。现在，它只是 .hide 和 .show 直到最后，如果没有图像，它就不会重新开始。

有人可以帮助我代码建议，使其采用滑块的 .length（其上的图像数量），如果它是最后一张幻灯片（图像），则继续回到第一张幻灯片（图片）......就像一个循环。

编辑：滑块标记

    <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>

【问题讨论】：

除非我忽略了什么：_s.slide_active++; _s.slide_active = _s.slide_active % this.slide.length;
但是我已经有了_s.slide_active++；超时了，为什么还要重复呢？
据我了解，您有不同的幻灯片相互重叠。您在一段时间内按顺序隐藏幻灯片以在其下方显示幻灯片。如果一段时间后出现最后一张幻灯片，您必须让第一张幻灯片出现而不是隐藏，并且当您进行交易时（第一张幻灯片完全显示）让所有幻灯片出现在其下方并重复相同的顺序
@fxg 仅用于上下文
您是否尝试在每个run() 调用中运行条件if 语句来确定它是否是最后一张幻灯片，然后相应地继续？

标签： javascript jquery html

【解决方案1】：

Created a fixed version for you here.

最简单的方法是在您当前拥有的地方运行一个简单的数学运算

_s.slide_active++;

相反，我得到_s.slide_active，加上1，然后通过模数（%）计算总长度——得到余数：

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

【讨论】：

为了更好地说明它正确循环的效果（我在这里有一些“重复图像问题”），this might be a better example based on your answer。
@MarcoK 好点——为相同宽度/高度的图像指定不同的主题。
这太完美了，非常感谢！只要系统允许，我就会给予赏金:)

【解决方案2】：

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

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

我希望这会对您有所帮助。一切顺利。

【讨论】：

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

【解决方案3】：

你需要在长度为 1 之后到达 0。一种简单的方法是对长度取模：

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

【讨论】：

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

【解决方案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);
}

【讨论】：

它仍然停在最后一张图片