Javascript 如何将旋转木马项目移动到中间，当它'；在jquery中单击了什么

如何使旋转木马中心成为我单击的中间项目？我到处找答案，但都不是直截了当的答案。。。有人能帮我吗

这就是我到目前为止所做的：

HTML:

<div id="wrapper">
    <div id="carousel">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>

        <div class="viewport">
            <ul>
                <li><a href="#">Un</a></li>
                <li><a href="#">Deux</a></li>
                <li><a href="#">Trois</a></li>
                <li><a href="#">Quatre</a></li>
                <li><a href="#">Cinq</a></li>
                <li><a href="#">Six</a></li>
                <li><a href="#">Sept</a></li>
                <li><a href="#">Huit</a></li>
            </ul>
        </div>
        <!-- viewport -->

    </div>
    <!-- carousel -->
</div>
<!-- wrapper -->

---

好吧，它很难看，我希望它能给你一些想法

我创建了一个全局

currentItem

，跟踪中心的内容。每次旋转木马移动时，都会对其进行更新

我找到的非常有用的变量是

selfPosLeft

，它告诉我单击了什么。我应该补充一点，

90

是我通过点击获得的倍数。必须链接到您的CSS，我不知道如何找到这个数字动态

请试一试：）

---

好吧，我想象一下，当你有3个以上的项目时，你可以改变代码来计算当前项目和点击项目的

selfPosLeft

之间的差异，我将把这个留给你：）像这样，似乎是可行的

好吧，它很难看，我希望它能给你一些想法

我创建了一个全局

currentItem

，跟踪中心的内容。每次旋转木马移动时，都会对其进行更新

我找到的非常有用的变量是

selfPosLeft

，它告诉我单击了什么。我应该补充一点，

90

是我通过点击获得的倍数。必须链接到您的CSS，我不知道如何找到这个数字动态

请试一试：）

---

好吧，我想象一下，当你有3个以上的项目时，你可以改变代码来计算当前项目和点击项目的

selfPosLeft

之间的差异，我将把这个留给你：）像这样，似乎是可行的

当您准备好所有项目所需的所有信息时，您可以根据单击的项目计算左侧的值

这是我的修改：

我已经用这个函数绑定了carousel项目的点击操作，并使用self关键字传递了点击的项目

var itemClicked=function(item){
    var itemIndex=$(item).index(),
        newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
    $(itemList).animate({left:newLeft+"px"},400);
};

您可以在此url上进行检查：

---

我假设，无论查看的元素数量如何，该方法都可以工作，同时计算左侧0和中心元素左侧之间的填充。

当您准备好所有项目所需的所有信息时，您可以根据单击的项目计算左侧的值

这是我的修改：

我已经用这个函数绑定了carousel项目的点击操作，并使用self关键字传递了点击的项目

var itemClicked=function(item){
    var itemIndex=$(item).index(),
        newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
    $(itemList).animate({left:newLeft+"px"},400);
};

您可以在此url上进行检查：

---

我假设，无论查看的元素数量如何，这都应该可以工作，同时它计算中心元素左侧0和左侧之间的填充。

您的旋转木马是否始终只显示三个项目，还是可以显示更多项目？它可以是任意数目，但在本例中仅显示3个项目。我只是想要一些东西给我一个领先的开始，然后我可以调整它以后…你的旋转木马总是只显示三个项目，还是可以更多？它可以是任何数字，但对于这个例子只有3。我只是想要一些东西给我一个领先的开始，然后我可以适应它以后。。。

var itemClicked=function(item){
    var itemIndex=$(item).index(),
        newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
    $(itemList).animate({left:newLeft+"px"},400);
};