Question

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

现在我想要一个看起来像http://slidesjs.com/

的寻呼机系统

我可以将SlideJS寻呼机系统添加到JQuery循环中吗？如果是，怎么样？

Answer 1

可能很难“集成”插件，但是您可以轻松地使用显示小圆圈的css（或使用类似幻灯片的精灵）构建页面锚点，并且几乎相同。

我创建了一个演示：

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>

接下来设置寻呼机和prev / next的样式：

#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')
                  });

我们如何让SlidesJS的寻呼机进入JQuery Cycle

1 个答案: