jQuery - 制作我自己的滑块？

Question

我还在学习 jQuery，我知道我所问的可能是多余的，因为已经有数百个滑块，它们将比我的最终结果好得多。

但是，我正在尝试边做边学，并为自己设定了制作滑块的任务，所以您能给我的任何帮助都会很棒！

这是我目前所拥有的： http://jsfiddle.net/eLgBG/

$(document).ready(function() {

    $('.thumb').click(function(event){
        var idAttr = $(this).attr('rel');


        $('.thumb').removeClass('active');  
        $(this).addClass('active');


        $('.banner').hide("slide", {direction: "left"}, 500);
        $('.banner-' + idAttr).show("slide", {direction: "right"}, 500);


        if($('.thumb').hasClass('active')){
            return false;
        }


    })
}); 

我想实现的主要目标：

• 当您单击缩略图返回上一张幻灯片时，滑块会向后而不是向前移动。
• 第二张幻灯片没有立即进入，由于某种原因它首先显示为白色？其余的不这样做，这很奇怪

• 当您单击一个已经处于活动状态的选项卡时，我不希望它执行任何操作。 我已尝试修复此问题，但无法使其正常工作

      if($('.thumb').hasClass('active')){
          return false;
      }
  

任何帮助都会很棒，谢谢！ :)

Answer 1

这将修复您的第一个和第三个项目符号：

http://jsfiddle.net/H9tJc/1/

基本上，诀窍是存储当前幻灯片：

$(document).ready(function() {
        var currentRel = -1;

        $('.thumb').click(function(event){
            var idAttr = $(this).attr('rel');

            $('.thumb').removeClass('active');  
            $(this).addClass('active');

            if(parseInt(idAttr)>currentRel) {
                $('.banner').hide("slide", {direction: "left"}, 500);
                $('.banner-' + idAttr).show("slide", {direction: "right"}, 500);
            }
            else if(parseInt(idAttr)<currentRel) {
                $('.banner').hide("slide", {direction: "right"}, 500);
                $('.banner-' + idAttr).show("slide", {direction: "left"}, 500);
            }

            currentRel = parseInt(idAttr);

        })
    });