Question

一个jquery旋转木马，旋转木马内有按钮和下一个按钮。

通常，轮播将在左侧和下一个按钮右侧具有上一级按钮

是否有任何jquery轮播在旋转木马内容中有prev和next按钮？

我一次需要一张幻灯片，每张幻灯片都需要该幻灯片内容中的上一个和下一个按钮

Answer 1

你能不能只使用CSS将prev和next按钮定位在幻灯片内？

Answer 2

Nivo滑块。查看演示.. http://nivo.dev7studios.com/demos/

您希望按http://nivo.dev7studios.com/support/jquery-plugin-usage/

设置“directionNav：true”

Answer 3

使用jquery循环，您也可以轻松完成此操作，有两种方法。

插件下载：http://jquery.malsup.com/cycle/options.html

演示1：

为每张幻灯片添加上一个和下一个按钮。下一个和上一个按钮将使用幻灯片进行动画处理，因为它们位于幻灯片内。您想要这样做的唯一原因是您想要使用幻灯片为这些按钮设置动画。通常情况并非如此（参见示例2）

http://jsfiddle.net/lucuma/anwvL/1/

html会是这样的：

<div id="slideshow">

<div>
    <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
</div>
<div>
    <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" /></div>
<div>
      <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
        <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" /></div>

</div>

JS：

$('#slideshow').cycle({
    fx: 'scrollHorz',
    prev: $('.prev'),
    next: $('.next')
});

演示2

我们将下一个/上一个按钮放在幻灯片的顶部，但不在幻灯片内。您会注意到prev / next按钮没有幻灯片的动画，但是它们位于它们的顶部。这通常是您在大多数幻灯片中看到的内容（如文本或箭头所示）

http://jsfiddle.net/lucuma/hXxtJ/1/

<div id="sliders">
    <div class="controller">
       <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    </div>
    <div id="slideshow">

        <div>
            <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
        </div>
        <div>
            <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
        </div>
         <div>
            <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
        </div>
    </div>
</div>

JS：

$('#slideshow').cycle({
    fx: 'scrollHorz',
    prev: $('.prev'),
    next: $('.next')
});

Jquery旋转木马每个旋转木马滑动的前一个和下一个按钮

3 个答案: