Javascript 创建我自己的滑块

这更像是为自己和自己做的家庭作业

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

jsFiddle：

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

​如果你对我的问题不理解，请在下面评论，以便我可以编辑

---

非常感谢

如果您使用的是jQuery，则应将其设置为jQuery插件。 遵循，他们遵循良好的实践

---

您可以在以下位置看到解决方案：

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>

旁白

---

出于某种奇怪的原因，我花了太长时间才对代码进行解释，所以我放弃了。我将在下面发布它的简化版本，希望你能理解它

这是你想要的吗？如果是的话，我会解释给你听。@JOPLOmacedo，这就是我要找的，虽然我不太懂代码。。。请回复作为答案，这样我就可以在那里投票和评论：）当然！你会发现，这并不难。我已经仔细阅读了它，它确实从上一个滑块中删除了类“selected”，并将其添加到当前滑块中；这里的问题是，如果我想添加诸如按钮之类的选项来选择滑块“1,2,3”，或者甚至在鼠标悬停时停止事件，我认为代码不适合我的需要，需要按钮来浏览滑块：（我会给你复选标记，因为你回答了我的问题；）

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

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

.selected {
    border: 1px solid red;
}