如何使用SlideJS's Pager到JQuery循环
how we can have SlidesJS's Pager to JQuery Cycle
我试图为我的JQuery Cycle设计一个寻呼机系统。幸运的是,我从JQuery Cycle得到了这个:http://www.malsup.com/jquery/cycle/div.html
现在我想要一个寻呼机系统,看起来像http://slidesjs.com/
我可以将SlideJS Pager系统添加到JQuery循环中吗??如果是,如何?
可能很难"集成"插件,但您可以使用显示小圆圈的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"><</a> <!-- these could be images as well -->
<a href="#" class="next">></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')
});
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- JQuery使计数器每次更改时都会增加
- 如何在Angular2中使用jQuery插件
- 提高JQuery的性能
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JQuery合并了keyup和focusout两个函数
- 如何使用jQuery选择下拉列表的值
- 将PHP变量传递给jQuery时遇到问题
- jQuery UI自动完成突然停止工作
- jQuery Tablesorter Pager在Rails4中不起作用
- Update jQuery Cycle Pager onLoad
- 如何使用SlideJS's Pager到JQuery循环
- jQuery tableorter *Pager*不工作,如果从AJAX调用使用