0

これは、自分自身と自分自身に対して行う宿題のようなものです。

役に立つので練習する必要があるので、javascript (主に jquery) を使用して有効なスライダーを作成する方法を知りたいと思っていました。

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

私は 3 つの div を持っていますが、一度に 1 つだけを赤い枠で配置しようとしています:

これは私がこれまでに持っているものです:

<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/

実際には、関数スライダーで何をすべきかわかりません。3 つのスライダーがあるため、次のようにクラスを交互に切り替えます (アクティブの場合は 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/で動作していることを確認できます。

ジャバスクリプト...

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 に答える