Показать сообщение отдельно
  #1 (permalink)  
Старый 09.02.2015, 02:41
Аватар для Sanu0074
Аспирант
Отправить личное сообщение для Sanu0074 Посмотреть профиль Найти все сообщения от Sanu0074
 
Регистрация: 16.12.2012
Сообщений: 80

Косяк в анимации слайдера
Написал слайдер
$.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>

Подскажите где я накосячил?
Ответить с цитированием