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

这将修复你的第1和第3个子弹：

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);

        })
    });

jQuery - 制作我自己的滑块？

1 个答案: