0

静的な「ウィンドウ」と移動可能なアイテムのリストで構成される単純なスライダーを作成しようとしています。

ここに画像の説明を入力

親コンテナーは 1 つの項目のみを表示し、残りはすべて非表示にします。私はこのようなことをしようとしましたが、これは間違っているようです:

<div id="category-selector">
    <div class="categories-list clearfix">
        <a class="category">sports</a>
        <a class="category">fashion</a>
        <a class="category">health</a>
    </div>
</div>

#category-selector {
    width: 300px; margin: 0 auto; position: relative; z-index: 1;
    border: 2px solid #ccc;
   -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 55px;
    overflow: hidden;
}
.categories-list {
    position: absolute; top: 0; left: 0; display: block;
}
a.category {
    display: block; float: left; width: 100%; padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

この機能を実現するにはどうすればよいですか?

4

3 に答える 3

1

あなたが話しているのは、本質的にカルーセルまたはスライダーです。これをゼロからコーディングしようとするのではなく、数百万の jQuery プラグインの 1 つを使用してこれを構築します。個人的には、応答性が高く、実装が非常に簡単なため、このようなことにはbxsliderがとても気に入っています。

于 2013-11-08T13:38:13.067 に答える
1

これを試して：

.categories-list {
    display: block;
    white-space: nowrap;

    /*margin-left: -300px;*/
}
a.category {
    display: inline-block; 
    width: 280px; 
    padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

リンクを左から右に配置する場合は、固定幅に設定する必要があります。100% を設定すると、常にコンテナーを満たそうとします。に設定すると、コンテナに設定することで行の折り返しdisplayをinline-block避けることができます。white-space: nowrap;スクロールするには、たとえばコンテナにマージンを設定するだけですmargin-left: -300px;

作業サンプル: http://jsfiddle.net/N9R2E/

または、これを試すこともできます：

.categories-list {
    display: block;
    white-space: nowrap;
    margin-left: -300px;
    width: 10000px; /* long enough to fit all links */
}
a.category {
    display: block; 
    float:left;
    width: 280px; 
    padding: 10px;
    font-size: 30px; font-family: Cambria, 'Segoe UI', sans-serif; line-height: 35px;
    text-decoration: none; text-align: center; color: #42a6ce;
}

これはあなたの試みでdisplay:blockand like を使用しますが、幅は固定されています。float:leftすべてのリンクを 1 行categories-listにまとめるには、すべてのリンクをまとめたものよりも広くする必要があります。

作業サンプル: http://jsfiddle.net/N9R2E/3/

于 2013-11-08T13:05:57.057 に答える
1

JS やボタンを使用してもかまわない場合は、これが 1 つの方法です。

$(document).ready(function() {

var slider = $("#categoriese_list");                    
var leftProperty, newleftProperty;

// the click event handler for the right button                     
$("#right_button").click(function() { 

    // get value of current left property
    leftProperty = parseInt(slider.css("left"));

    // determine new value of left property
    if (leftProperty - 100 <= -900) {
        newLeftProperty = 0; }
    else {
        newLeftProperty = leftProperty - 100; }

    // use the animate function to change the left property
    slider.animate( {left: newLeftProperty}, 1000);

});  // end click

// the click event handler for the left button
$("#left_button").click(function() {

    // get value of current right property
    leftProperty = parseInt(slider.css("left"));

    // determine new value of left property
    if (leftProperty < 0) {
        newLeftProperty = leftProperty + 100;
    }
    else {
        newLeftProperty = -800;
    }

    // use the animate function to change the left property
    slider.animate( {left: newLeftProperty}, 1000);

   });  // end click        
}); // end ready

ただし、<ul>より一直線に並べるために、カテゴリ リストを a 以外にすることをお勧めします。

于 2013-11-08T13:13:45.573 に答える