0

一个 jquery 轮播，其中 prev 按钮和 next 按钮在轮播中。

通常轮播左侧有上一个按钮，右侧有下一个按钮

是否有任何 jquery carousel，其中 prev 和 next 按钮在 carousel 内容内？

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

4

3 回答 3

0

Nivo slider. Check out the demo.. http://nivo.dev7studios.com/demos/

You want to set "directionNav : true" per http://nivo.dev7studios.com/support/jquery-plugin-usage/

于 2012-05-24T07:09:28.373 回答
0

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

于 2012-05-24T07:01:03.683 回答
0

使用 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

我们将下一个/上一个按钮放置在幻灯片的顶部，但不在幻灯片内部。您会注意到上一个/下一个按钮不会与幻灯片一起动画，而是在幻灯片之上。这通常是您在大多数幻灯片中看到的（作为文本或箭头）

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')
});​
于 2012-05-28T16:17:03.203 回答