0

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

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

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

我有 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;

​如果您对我的问题有不明白的地方，请在下方评论，以便我进行编辑。

非常感谢你！！！

4

2 回答 2

0

如果您使用 jQuery，则应将其设置为 jQuery 插件。遵循本教程，他们遵循良好的做法。

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

于 2012-07-18T20:48:19.113 回答
0

您可以在以下位置看到解决方案：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;
}

在旁边

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

于 2012-07-18T22:24:55.763 回答