Question

当我点击一个按钮时，表格会向右移动，我将能够看到更多“合作伙伴”标签:)。我只需要Javascript代码..：

HTML

<div class="proarena">
    <div class="proarena2">
        <div class="leftpro"></div>
        <div class="proPartners">
            <table class="Pro" cellspacing="0" style="left: 0px;">
                <tbody>
                    <tr>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                        <td><a href="#">Partners</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="darkside right"></div>
    </div>
</div>

CSS

.proarena {
    background: url(http://i.imgur.com/DiteoVd.png) 50% 100% no-repeat;
    margin: 0px auto;
    padding-bottom: 22px;
    width: 800px;
}

.proarena2 {
    -webkit-box-shadow: rgb(200,200,200) 0px 0px 5px;
    background: rgb(245,245,245);
    border-radius: 5px;
    box-shadow: rgb(200,200,200) 0px 0px 5px;
    height: 100%;
    overflow: hidden;
    padding: 5px;
    width: 100%;
}

.proPartners {
    overflow: hidden;
    width: 800px;
}

.Pro {
    background: url(http://i.imgur.com/LGTrDgE.png) 50% 0% repeat-y;
    border: 1px solid rgb(210, 210, 210);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    left: 0px;
    position: relative;
    width: 968px;
}

.Pro tr, .Pro tr td {
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
}

.Pro tr:nth-child(1n):hover td:nth-child(1n) {
    background: rgb(228, 228, 228);
}

.Pro tr td:hover {
    outline: rgb(180, 180, 180) solid 1px;
    background: rgb(255, 255, 255)!important;
}

.Pro tr td {
    background: rgb(248, 248, 248);
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 88px;
}

.Pro  tr:nth-child(2n):hover td:nth-child(2n) {
    background: rgb(228, 228, 228);
}

我不认为这很容易，但这并非不可能。我尝试了一些但没有结果。：）

Answer 1

看起来你有一个容器里面的内容宽度更宽。如果我理解你的问题，你想要左/右按钮基本上来回滑动以显示隐藏的内容。

使用jQuery的.animate()方法，您可以左右滑动表格。以下示例严格基于您的标记。唯一的区别是我添加了左右按钮的html元素，并且我将position: relative;添加到.Pro CSS类：

http://jsfiddle.net/lasha/8Zjza/

var $container = $(".proPartners");
var widthOfContainer = $container.width();
var $table = $(".Pro");
$(".right").on("click", function (e) {
    $table.animate({
        left: "-=" + widthOfContainer
    }, 300);
});
$(".leftpro").on("click", function (e) {
    $table.animate({
        left: "+=" + widthOfContainer
    }, 300);
});

Answer 2

好像你不知道从哪里开始我会告诉你如何做到这一点，但是你需要研究自己并尝试它。当你做更多工作再回来时，再次回答问题。

伪代码：

中的

创建一个包含您要导航的所有元素的数组：如何在此处创建数组：http://learn.jquery.com/javascript-101/arrays/

如果你喜欢这样做，那么一旦你有数组将所有元素设置为隐藏： jQuery hide：http://api.jquery.com/hide/ jQuery show：http://api.jquery.com/show/

一旦你有了，你就可以使用.load并将一个或多个元素设置为可见，为了让你开始，我建议你做1看它是如何工作的。所以做array[item1].show()

之类的事情

一旦你有了，你将需要导航前进和后退您可以在每个元素/按钮上使用.click方法 jQuery点击：http://api.jquery.com/click/

现在你需要在每个方面做一些编码：例如，当你前进时，你可以创建变量位置：如i并执行以下操作 array elements隐藏全部或array[i].hide()然后将i增加到下一个位置i++并执行array[i].show()。

对后面做同样的事情只需使用i--

有很多方法可以做到这一点，但是这个方法应该是直截了当的，足够简单，可以让你前进。

单击按钮时将元素向左移动

2 个答案: