創建我自己的滑塊

Question

這更像是爲我自己和我自己完成的作業。

這將是有用的，我需要練習，所以我想知道我如何能使用JavaScript（jQuery的大部分）

的jsfiddle創建一個有效的滑塊：http://jsfiddle.net/htArE/

我有3個div的，和我「M試圖把只有一個紅色的邊框在同一時間：

這是我到目前爲止有：

<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

你可以看到下面的工作方案：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

有人帶我太長時間寫的解釋，一些奇怪的原因的代碼，所以我就放棄了。我會在下面發佈一個簡化版本，希望你能理解這一點。

Answer 2

如果您使用的是jQuery，則應該將其設置爲jQuery插件。 按照this tutorial，他們遵循良好的做法。

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