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

我遇到的问题是我不知道如何在最后一张幻灯片（图片）之后得到它，它又回到了第一张幻灯片。现在，它只是.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>

Answer 1

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

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

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

Answer 2

Created a fixed version for you here

最简单的方法是运行一个当前有

的简单数学运算

_s.slide_active++;

相反，我得到_s.slide_active，添加1，然后通过模数（%）运行到总长度 - 这给出了余数：

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

Answer 3

你需要在长度为1后达到0。一种简单的方法是以模数长度工作：

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

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

jQuery滑块 - 最后一次转换

4 个答案: