我们如何拥有 SlidesJS 的寻呼机到 JQuery 循环

Question

我试图为我的JQuery Cycle设计一个寻呼机系统。幸运的是，我从JQuery Cycle得到了这个：http://www.malsup.com/jquery/cycle/div.html

现在我想要一个寻呼机系统，看起来像http://slidesjs.com/

我可以将SlideJS Pager系统添加到JQuery循环中吗？？如果是，如何？

Answer 1

可能很难"集成"插件，但您可以使用显示小圆圈的css（或使用类似slidejs的精灵）轻松构建页面锚，并且几乎完全相同。

我创建了一个演示：

http://jsfiddle.net/lucuma/Mf7Rv/2/

首先，为整个包设置一个容器。

<div id="sliders">
   <div id="slideshow">
      <!-- your slides go here whether divs or imgs -->
   </div>
   <div id="pager">
      <!-- this gets dynamically generated by the plugin's paginate that we'll return a's -->
   </div>
   <div id="controller">
     <a href="#" class="prev">&lt;</a>  <!-- these could be images as well -->
     <a href="#" class="next">&gt;</a>
   </div>
</div>

下一个样式的寻呼机和上一个/下一个类似的东西：

#pager {display:inline-block;float:right}
#pager a {background:#FFF;border:2px solid #333;display:inline-block;
-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:10px; height:10px; margin-left:2px;
}
#pager a.activeSlide {background-color:#333333;border-color:#333333}
#pager a:hover{background-color:#97201c;border-color:#97201c}
#controller a {text-decoration:none;color:#333333}
#controller a.hover {text-decoration:none;color:#97201c}

最后加载jquery循环：

function paginate(idx, slide) {
  return "<a href='#'></a>"   ;
}
$('#slideshow').cycle({fx:'scrollHorz', pager: '#pager',
                  pagerAnchorBuilder: paginate,
                   prev: $('.prev'),
                   next: $('.next')
                  });​