Здравствуйте!
Сразу оговорюсь, что в 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))
);