0

我正在尝试构建一个由静态“窗口”和可移动项目列表组成的简单滑块。

在此处输入图像描述

其中父容器仅显示一项并隐藏所有其余项。我试图做这样的事情，但似乎这是错误的：

<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

试试这个：

.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:block和float:left喜欢，但宽度是固定的。一行中的所有链接categories-list必须比所有链接更宽。

工作示例：http: //jsfiddle.net/N9R2E/3/

于 2013-11-08T13:05:57.057 回答
1

如果您不介意使用 JS 或按钮，这是一种方法。

$(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>以使其更加符合要求。

于 2013-11-08T13:13:45.573 回答
1

你所说的本质上是一个旋转木马或滑块。我不会尝试从头开始编写代码，而是使用数百万个 jQuery 插件中的一个来构建它。我个人非常喜欢bxslider，因为它响应迅速且实现起来非常简单。

于 2013-11-08T13:38:13.067 回答