???? ?? ???? ??? ???? ??? jQuery ??? ????? ??? ??

?? ???? ??? ??? ?? JavaScript? ??? ???? ????. ???? ????? ??? ?? ???? ???? ?? jQuery? ???? ??? ?? ??? ??? ????.

?? jQuery ??:

• index(): ?? ? ??? ??? ???????. elements.
• eq(): ??? ?? ??? ?????.

???:

• ??? ??? ??? ???? ?????.
• ??? ??????. eq() ???? ???? ?? ???? ??? ?????.

1. ????/????? ??

HTML:

<ul class="images">
  ...
</ul>

<ul class="triggers">
  ...
</ul>

CS S:

ul.images { position:relative; }
ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

2. ???? ??

HTML:

FadeIn/FadeOut? ?? effect.

CSS:

.mask { ... }
ul.images { ... }
ul.images li { ... }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

? ?? ??? ?? ?? jQuery ?? ????:

triggers.click(function() { ... });
$('.next').click(function() { ... });
$('.prev').click(function() { ... });
function sliderTiming() { ... }
function resetTiming() { ... }

? ??? ??? ?? ???? ??? ???? ??? jQuery ??? ????? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!