Question

我尝试使用类似于

的swipe.js为旋转木马添加分页导航

所需效果将意味着点击1-5链接到旋转木马上的幻灯片

现场样本

    <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
  <div class='swipe-wrap'>
    <div><b>0</b></div>
    <div><b>1</b></div>
    <div><b>2</b></div>
    <div><b>3</b></div>
    <div><b>4</b></div>
    <div><b>5</b></div>
  </div>
</div>

<nav>
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
</nav>

Answer 1

该插件有一个功能.slide，可让您导航到所需的幻灯片。

语法是，

.slide(pos, duration)

然后在您的导航栏中添加一个ID #nav，然后向li添加点击处理程序，在处理程序内，使用.slide {{1}调用index + 1 }））作为pos。

$(this).index() + 1

DEMO： http://jsfiddle.net/xYDf4/

~~添加了一些样式以突出显示选择http://jsfiddle.net/xYDf4/1/~~

修改：添加条件以同步寻呼机和下一个/上一个按钮以标记它们 http://jsfiddle.net/xYDf4/2

$('#nav li').on ('click', function () {
    window.mySwipe.slide($(this).index() + 1, 200);
});

Answer 2

尝试使用这个可以完成任务的类似插件。

http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/?utm_source=javascriptweekly&utm_medium=email
http://www.woothemes.com/flexslider/

添加分页导航到swipejs轮播

2 个答案: