Показать сообщение отдельно
  #1 (permalink)  
Старый 08.04.2012, 13:20
Новичок на форуме
Отправить личное сообщение для Book-war Посмотреть профиль Найти все сообщения от Book-war
 
Регистрация: 08.04.2012
Сообщений: 2

Нужна помощь в анимировании.
Здравствуйте!
Сразу оговорюсь, что в JavaScript'инге я новичок.
Мне необходимо сделать страничку с 4-мя анимированными эл-тами (смена слайдов). При этом для каждого эл-та должна быть своя схема смены слайдов.
Проблема в том, что я не знаю как заставить скрипт различать эти эл-ты. Про :last/:nth-child и прочее знаю (но что-то не получается при их помощи это сделать).
Использую jQuery и модификацию плагина MobilySlider.

Ниже используемый скрипт (версия с единой схемой смены слайдов для всех). Во вложении архив со страничкой.

/* ==========================================================
 * Modified by unknown newbie in JavaScript.
 * Original source-code:
 * [url]http://playground.mobily.pl/jquery/mobily-slider.html[/url]
 * MobilySlider date: 20.1.2010 last update: 02.02.2011
 * By Marcin Dziewulski
 * web: [url]http://www.mobily.pl[/url] or [url]http://playground.mobily.pl[/url]
 * email: [email]hello@mobily.pl[/email]
 * Free to use under the MIT license.
 * ========================================================== */
($(document).ready(function($){
    $.fn.mobilyslider=function(options){
        var defaults={
            content:".sliderContent",
            children:"div",
            transition:"horizontal",
            animationSpeed:300,
            autoplay:false,
            autoplaySpeed:3000,
            pauseOnHover:false,
            prev:"prev",
            next:"next",
            animationStart:function(){},
            animationComplete:function(){}
        };
        var sets=$.extend({},defaults,options);
        return this.each(function(){
            var $t=$(this),
            item=$t.children(sets.content).children(sets.children),
            l=item.length-1,
            w=item.width(),
            h=item.height(),
            step=0,
            i=-1,            //счетчик
            m=[1,2,3,4],  //этот массив задает схему смены слайдов
            play,
            z,
            active;            
            var slider={init:function(){
                        slider.data();
                        if(sets.autoplay){slider.autoplay()}slider.triggers()
            },
            data:function(){
                item.each(function(i){$(this).css("z-index",-(i-l))});
                if(sets.transition=="fade"){item.hide().eq(0).show()}
            },
            zindex:{    //отвечает за смену z-index
                next:function(){
                    item.css("z-index",l+1).eq(step).css("z-index",l+3).prev(item).css("z-index",l+2)
                },
                trigger:function(){
                    if(z==1){
                        slider.zindex.next()
                    }
                }
            },
            slide:{     //этот метод выплняет анимацию
                left:function(sign){
                    sets.animationStart.call(this);item.stop(true, true).eq(step).animate({left:sign+"="+w},
                    sets.animationSpeed,function(){slider.zindex.trigger()}).animate({left:0},
                    sets.animationSpeed+200,function(){sets.animationComplete.call(this)})
                },
                top:function(sign){
                    sets.animationStart.call(this);item.stop(true, true).eq(step).animate({top:sign+"="+h},
                    sets.animationSpeed,function(){slider.zindex.trigger()}).animate({top:0},
                    sets.animationSpeed+200,function(){sets.animationComplete.call(this)})
                },
                fade:function(){
                    sets.animationStart.call(this);
                    item.stop(true, true).fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,
                    function(){sets.animationComplete.call(this)})
                }
            },
            animation:{ //этот метод выбирает способ анимации
                next:function(){
                    step==l?step=0:step++;z=1;
                    switch(m[i]){ //в зависимости от выбранного значения в массиве (от 1 до 5) 
                        
                        case 1:slider.slide.left("-"); //смена слайда слева направо
                        break;
                        
                        case 2:slider.slide.top("+"); //смена слайда сверху вниз
                        break;
                        
                        case 3:slider.slide.left("+"); //справа налево
                        break;
                        
                        case 4:slider.slide.top("-"); //снизу вверх
                        break;
                                                
                        case 5:slider.slide.fade();  //растворение
                        break
                    }
                }
            },
            autoplay:function(){
                play=setInterval(function(){
                    i>=3?i=0:i++;    //выбор шага схемы смены слайда
                    slider.animation.next();
                },sets.autoplaySpeed)
            },
            pause:function(){clearInterval(play)},  
            triggers:function(){
                if(sets.pauseOnHover){   //пауза по наведению
                    $t.hover(function(){slider.pause()},
                    function(){slider.autoplay()})
                }
            }
        };
        slider.init()
        })
    }
}
(jQuery))
);
Вложения:
Тип файла: zip test.zip (762.0 Кб, 3 просмотров)
Ответить с цитированием