Question

我正在创建自己的自定义内容滑块，我想知道最好的方法是使用jQuery。

我希望下一个/上一个有两个按钮。当用户单击下一步时，当前幻灯片将向左滑动，新幻灯片将显示。

我应该如何在jQuery中执行此操作？我会使用插件，但在定制方面它们非常烦人。

到目前为止

代码：

    <!--Main slider content-->
    <div class="contentslider_content" style=" float:left; width:890px; height:300px; border:1px solid #CCC; overflow:hidden;">

    <div class="contentslider_slides slide_1" style=" float:left; width:890px; height:300px; background-color:#0F3"></div>

    <div class="contentslider_slides slide_2" style=" float:left; width:890px; height:300px; background-color:#ccc"></div>

    <div class="contentslider_slides slide_3" style=" float:left; width:890px; height:300px; background-color:#ccc"></div>

    </div>
    <!--Main slider content-->

<button class="next">Next</button>

<button class="previous">Previous</button>

Answer 1

这是我的方法：http://jsfiddle.net/UpDcS/3/

我在做什么（基本上）：默认情况下隐藏所有项目并且绝对定位在视口中。我创建了两个函数，它们包含了在幻灯片中获取下一个/上一个元素的逻辑，因此它可以无限滚动。通过将新项目设置为当前项目的左侧/右侧并将两个项目向该侧移动100％来实现滑动。在此之后，再次隐藏（现在）旧项目。我希望你能弄清楚细节。这应该是一个很好的起点。

Answer 2

我的答案不是关于JQ代码本身 - 它是关于概念的。

我自己做了类似的事情：

创建X元素，而X是静态点显示的元素数（假设为1）加上2个，一个在右边，一个在左边。我将它们命名为'lefter' - 'center' - 'righter'
使用我想要显示的内容创建元素数组（html创建和JQ会将其收集到JS数组中）
这些按钮只是放置了lefter，center和righter元素的innerHTML。
然后，JS将选择以下两个选项之一：
- 向左移动=将lefter的大小从100％调整为0（当它为5％时你可以添加淡入淡出效果..）
- 做同样的事，但在右边。

而且，至于定制......它几乎是'无风格'，只是css it。

希望我理解你的问题并且正在回答它。贝纳

jQuery滑块帮助

2 个答案: