1

私はインラインで 4 つの div を持っています。php を使用して、それぞれに一意の ID を割り当てます。いつでも 1 つの div だけが表示されます。これが結果の html です。

<div id="contentslider">
    <div class="cs_wrapper">
        <div class="cs_slider">
            <div id="1" class="cs_article">
                SLIDE 1
            </div>
            <div id="2" class="cs_article">
                SLIDE 2
            </div>
            <div id="3" class="cs_article">
                SLIDE 3
            </div>
            <div id="4" class="cs_article">
                SLIDE 4
            </div>
        </div>
    </div>
</div>

そしてCSS：

.contentslider {
  position:relative;
  display:block;
  width:480px;
  height:400px;
  margin:0 auto;
  overflow:hidden;
}

.cs_wrapper {
  position:relative;
  display:block;
  width:480px;
  height:400px;
  margin:0;
  padding:0;
  overflow:hidden;
}
.cs_slider {
  position:absolute;
  width:10000px;
  height:100%;
  margin:0;
  padding:0;
}
.cs_article {
  float:left;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:480px;
  height:400px;
  margin:0 auto;
  padding:0;
}

ID を指定すると、アニメーション化して選択したスライドに移動する jquery 関数をコーディングしようとしていますが、どこから始めればよいかわかりません。何か提案はありますか?

EDIT :必要に応じてjsFiddleを用意してください。

4

3 に答える 3

1

関数を使用して簡単なjsFiddleを作成しました。あなたの質問に対する上記のコメントのように、ID を非数字に変更しました。

関数は次のとおりです。

function GoToSlide(id) {
    $(".cs_article:visible").slideUp("slow");
    $("#" + id).slideDown("slow");
}
于 2013-02-07T16:51:27.180 に答える
0

あなたが説明しているものと非常によく似たアプリケーションの作成に関するMartin Angelovによる優れたチュートリアルがあります：CSSとjQueryを使用した美しいAppleスタイルのスライドショーギャラリー

于 2013-02-07T17:20:01.163 に答える
0

私はすべてを隠すアプローチを好みます。

これは、CSS を使用せずに矢印キーでスライドをナビゲートするためのものです。

$(".cs_article").hide();
$(".cs_article").eq(0).show();
$(window).keydown(function(e) {
    curSlide = $(".cs_slider .cs_article:visible");
    if (e.which==37 &&  curSlide.prev()[0]) { 
        curSlide.hide(); curSlide.prev().show();
    } else if (e.which==39 && curSlide.next()[0]) {
        curSlide.hide(); curSlide.next().show();
    }
})

1つ見せたいなら1つだけ見せて

$(".cs_article").hide();
$("#3.cs_article").show();  // to show slide 3 only
于 2013-02-07T19:24:53.520 に答える