7

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

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

4 回答 4

1

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

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

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

于 2013-03-07T10:56:14.780 回答
1

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

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

_s.slide_active++;

相反，我得到_s.slide_active、 add 1，然后将其通过模数 ( %) 运行到总长度 - 这给出了余数：

_s.slide_active = (_s.slide_active + 1) % _s.slide.length;
于 2013-03-07T12:50:42.937 回答
0

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

_s.slide_active++;
_s.slide_active %= length;
于 2013-03-07T11:02:08.387 回答
0

未经测试，但希望有帮助： 

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);
}
于 2013-03-07T11:18:14.950 回答