Adding simple Pagination to an existing Slideshow(向现有幻灯片放映添加简单分页)
本文介绍了向现有幻灯片放映添加简单分页的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想向此现有脚本添加简单的分页: http://sixrevisions.com/demo/slideshow/final.html所以基本上它会计算<div class="slide">
实例的数量,然后生成一个列表(例如1-2-3-4),每个列表都有一个指向该特定幻灯片的超链接。
我对Java脚本不是很感兴趣,所以我希望在这方面有一些帮助。
有人能告诉我如何做到这一点吗?
非常感谢您的指点:-)
推荐答案
基本上,您希望使用变量number OfSlides为每个幻灯片添加一个链接元素,然后将闭包添加到这些链接上的绑定。您可以在创建链接时将COUNTER变量分配给每个链接,从而重复使用动画计算。
for(i = 0; i < numberOfSlides; i++) {
(function() {
var slideIndex = i;
var slideLabel = i + 1;
var x = $('<a id="slide' + slideLabel + '"href="javascript:void(0);" class="paginatorLink">' + slideLabel + '</a>'); //Format your links here
x.click(function() {
currentPosition = slideIndex;
// Hide / show controls
manageControls(currentPosition);
$('#slideInner').animate({
'marginLeft': slideWidth * -slideIndex
});
});
$('#slideshow').append(x);
})();
}
这是一把小提琴:http://jsfiddle.net/radiatorsounds/aQb6P/
这篇关于向现有幻灯片放映添加简单分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:向现有幻灯片放映添加简单分页


猜你喜欢
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- 400或500级别的HTTP响应 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06