jQuery滑块 - 最后一次转换

Question

I created this slider (didn't want to use plugins):

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

The problem I have is that I don´t know how to get it after the last slide(image), it goes back to the first slide again. Right now, it just .hide and .show till the end and if there is no image it just doesn´t start again.

Can someone help me out with a code suggestion to make it take the .length of the slider(the number of images on it) and if it is the last slide(image), then goes back to the first slide(image)... like a cycle.

Edit: Slider markup

    <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

Take a look at this Fiddle link, this will help you create the slider in a cyclic way.If the slider reaches the last image it will start again from the first image.

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

I hope this will help you more. All the best.

Answer 2

Created a fixed version for you here .

The easiest way to do this is to run a simple maths operation where you currently have

_s.slide_active++;

Instead, I get _s.slide_active , add 1 , then run that through modulus ( % ) to the total length — which gives the remainder:

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

Answer 3

You need to get to 0 after length-1. One simple way to do that is to work modulo length:

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

Answer 4

not tested but hope helpful :

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