Написал слайдер
$.fn.slider = function() {
var sett = {
items: 0,
curr: 1,
lastCurr: 1,
t: null,
init: function(){
$('.switch .next').click(function(){
sett.next();
});
$('.switch .prev').click(function(){
sett.prev();
});
this.items = $('.tape div').length;
for(var i=0;i<this.items;i++){
$('.next').before($('<div/>',{class:'item','data-item':(1+i)}));
$('.tape div:nth-child('+(1+i)+')').attr('data-item',(1+i));
}
$('.switch .item:nth-child('+(this.curr+1)+')').addClass('curr');
$('.tape div').removeClass('curr');
$('.tape div:nth-child('+this.curr+')').addClass('curr');
$(document).on('click','.switch .item',function(){
sett.curr = $(this).data('item');
sett.setCurr();
});
$('.slider').mouseenter(function(){
clearInterval(sett.t);
}).mouseleave(function(){
sett.setAutoslide();
});
this.setAutoslide();
},
setCurr: function(i){
if(typeof(i)==='undefined'){
i = this.curr;
}
$('.switch .item').removeClass('curr');
$('.switch .item:nth-child('+(this.curr+1)+')').addClass('curr');
$('.tape div').removeClass('curr');
$('.tape div').hide();
var item = $('.tape div[data-item='+this.curr+']');
if(this.curr>this.lastCurr){
item.show();
item.prev().show();
item.addClass('curr');
item.css({left:741,opacity:0});
item.stop().animate({left:0,opacity:1},300);
this.lastCurr = this.curr;
}else{
item.show();
item.next().show();
item.addClass('curr');
item.css({right:741,opacity:0});
item.stop().animate({right:0,opacity:1},300);
this.lastCurr = this.curr;
}
},
next: function(){
this.curr++;
if(this.curr>this.items){
this.curr = 1;
}
this.setCurr();
},
prev: function(){
this.curr--;
if(this.curr<1){
this.curr = this.items;
}
this.setCurr();
},
setAutoslide: function(){
this.t = setInterval(function(){
sett.next();
},2500);
}
};sett.init();
};
При перелистывании назад, блоки накладываются друг на друга, а при перелистывании с последнего слайда на первый, во время анимации отображается второй а на него накладывается нужный, а должен быть четвертый последний вместо второго.
Вот html-код:
<div class="slider">
<div class="tape">
<div style="background: red">slide 1</div>
<div style="background: green">slide 2</div>
<div style="background: magenta">slide 3</div>
<div style="background: blue">slide 4</div>
</div>
<div class="control">
<div class="switch">
<div class="prev"></div>
<div class="next"></div>
</div>
</div>
</div>
Подскажите где я накосячил?
