Question

这更像是为myselft和我自己做的功课。

这将是有用的，我需要练习，所以我想知道如何使用javascript创建一个有效的滑块（主要是jquery）

我有3个div，我试图一次只放一个红色边框：

这是我到目前为止所得到的：

<div id="slidez0" class="active">slider 1</div>
<div id="slidez1" class="inactive">slide 2</div>
<div id="slidez2" class="inactive">slide 3</div>

setInterval(slider(), 2000);


function slider(){
    for (i=0; i<3; i++){
        if($('#slidez'+i).hasClass('1')){
               $('#slidez'+i).css('border','solid 1px red');
               $('#slidez1').css('border','solid 1px white');
               $('#slidez2').css('border','solid 1px white');
        }else if($('#slidez'+i).hasClass('2')){
               $('#slidez'+i).css('border','solid 1px red');
               $('#slidez0').css('border','solid 1px white');
               $('#slidez2').css('border','solid 1px white');
        }else if($('#slidez'+i).hasClass('3')){
               $('#slidez'+i).css('border','solid 1px red');
               $('#slidez0').css('border','solid 1px white');
               $('#slidez1').css('border','solid 1px white');
        }
        break;
    }
}

jsFiddle：http://jsfiddle.net/htArE/

实际上，我不知道在功能滑块中做了什么，我有三个滑块，所以它们会交替这样的类（1表示活动，0表示不活动）：

1 0 0  - first slider active;
0 1 0  - after setInterval, second slider active, first inactive;
0 0 1  - after another setInterval, third slider active, first and second inactive;

1 0 0  - Restart slider, first slider active, other inactive;

如果您对我的问题不了解，请在下面发表评论，以便我可以编辑。

非常感谢!!!

Answer 1

如果您正在使用jQuery，则应将其设置为jQuery插件。关注this tutorial，他们遵循良好做法。

http://net.tutsplus.com/articles/news/how-to-build-a-simple-content-slider-jquery-plugin/

Answer 2

您可以在以下位置查看以下解决方案：http://jsfiddle.net/htArE/4/

javascript ...

var slide = $('.slide'),
    count = 0,
    max_count = slide.length - 1,

    slideIt = function slideIt() {
        slide.removeClass('selected').eq(count).addClass('selected');
        count = ++count > max_count ? 0 : count;
        setTimeout(slideIt, 2000);
    };

    slideIt();

...为html ...

<div class="slide selected">slide 1</div>
<div class="slide">slide 2</div>
<div class="slide">slide 3</div>

...和css ......

.slide {
    float: left;
    width: 50px;
    height: 20px;
    border: 1px solid transparent;
}

.selected {
    border: 1px solid red;
}

<强> ASIDE

由于一些奇怪的原因，我花了很长时间才将解释写入代码，所以我放弃了。我会在下面发布一个简化版本，希望你会这样理解它。

创建我自己的滑块

2 个答案: