jQuery 轮播分页？
我正在为视频库创建 jquery 轮播。我需要为此创建一个分页。 我已经创建了这个，但这不是分页的通用脚本，我已经在脚本中硬编码了分页对象。我想让它通用，这样我就可以在同一页面上多次使用它。甚至无法访问轮播的目标对象。
例如，
总项目为 12 滚动项目 :- 一次 3 分页应该是 - 1, 2,3,4 (4 x 3 =12)
如果有人可以帮助我。 提前致谢
来源 http://sorgalla.com/jcarousel/
这里是代码
Script for init jquery carosuel
slidingCarosuel:function(getElements,paginationNum){
var myCarousel=jQuery(getElements);
if (myCarousel) {
jQuery(myCarousel).jcarousel({
scroll: paginationNum,
initCallback:clasohlson.carosuelPagination
});
}
}
这个脚本创建分页
carosuelPagination:function(carousel) {
_scrolls=carousel.options.scroll;
carousel.options.scroll = jQuery.jcarousel.intval(_scrolls);
var noLi = carousel.options.size;
var requiredLi = Math.ceil(noLi / _scrolls);
for (var i = 0; i < requiredLi; i++) {
var count = i + 1;
var liSrting = "<li>" + count + "</li>";
$(".hmPagination").append(liSrting);
}
if (noLi <= _scrolls) {
$(".hmPagination").hide();
$(".jcarousel-prev").hide();
$(".jcarousel-next").hide();
}
else {
//$(".hmPagination").show().text("");
$(".jcarousel-prev").show();
$(".jcarousel-next").show();
}
$(".hmPagination").children(":first").addClass("selected");
$(".jcarousel-next").click(function() {
$(".hmPagination").find("li.selected").next().addClass("selected");
$(".hmPagination").find("li.selected:last").prev().removeClass("selected");
})
$(".jcarousel-prev").click(function() {
$(".hmPagination").find("li.selected:last").prev().addClass("selected");
$(".hmPagination li.selected").next().removeClass("selected")
})
$('.hmPagination li').each(function() {
$(this).bind("click", function() {
$('.hmPagination li').removeClass("selected");
$(this).addClass("selected");
var noClick = parseInt($(this).text());
var remain = noLi % 1;
if ($(this).text() == "1") {
carousel.scroll(jQuery.jcarousel.intval(1))
}
if (remain == 0) {
var ulLi = $("ul.pagination li").length
var scrollNo = ((noClick - 1) * 1) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
} else {
var scrollNo = ((noClick - 1) * 1) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
}
//carousel.scroll(jQuery.jcarousel.intval(firstItem));
// return false;
})
});
}
这是 Html
<ul class="carosuelList">
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
</ul>
<ul class="hmPagination"><li></li></ul>
I am creating jquery carousel for video gallery. I need to create a pagination for this.
I have already created this but that is not genric script for pagination I have hard coded the Pagination object in script. I want to make it genric so that i can use this multiple time on same page. even not able to access the target object of carousel.
For E.g
Total Item is 12
Scroll Item :- 3 at time
Pagination shoul be - 1, 2,3,4 (4 x 3 =12)
If someone can help me on this.
Thanks in advance
Source
http://sorgalla.com/jcarousel/
here is code
Script for init jquery carosuel
slidingCarosuel:function(getElements,paginationNum){
var myCarousel=jQuery(getElements);
if (myCarousel) {
jQuery(myCarousel).jcarousel({
scroll: paginationNum,
initCallback:clasohlson.carosuelPagination
});
}
}
This script creating pagination
carosuelPagination:function(carousel) {
_scrolls=carousel.options.scroll;
carousel.options.scroll = jQuery.jcarousel.intval(_scrolls);
var noLi = carousel.options.size;
var requiredLi = Math.ceil(noLi / _scrolls);
for (var i = 0; i < requiredLi; i++) {
var count = i + 1;
var liSrting = "<li>" + count + "</li>";
$(".hmPagination").append(liSrting);
}
if (noLi <= _scrolls) {
$(".hmPagination").hide();
$(".jcarousel-prev").hide();
$(".jcarousel-next").hide();
}
else {
//$(".hmPagination").show().text("");
$(".jcarousel-prev").show();
$(".jcarousel-next").show();
}
$(".hmPagination").children(":first").addClass("selected");
$(".jcarousel-next").click(function() {
$(".hmPagination").find("li.selected").next().addClass("selected");
$(".hmPagination").find("li.selected:last").prev().removeClass("selected");
})
$(".jcarousel-prev").click(function() {
$(".hmPagination").find("li.selected:last").prev().addClass("selected");
$(".hmPagination li.selected").next().removeClass("selected")
})
$('.hmPagination li').each(function() {
$(this).bind("click", function() {
$('.hmPagination li').removeClass("selected");
$(this).addClass("selected");
var noClick = parseInt($(this).text());
var remain = noLi % 1;
if ($(this).text() == "1") {
carousel.scroll(jQuery.jcarousel.intval(1))
}
if (remain == 0) {
var ulLi = $("ul.pagination li").length
var scrollNo = ((noClick - 1) * 1) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
} else {
var scrollNo = ((noClick - 1) * 1) + 1
carousel.scroll(jQuery.jcarousel.intval(scrollNo))
}
//carousel.scroll(jQuery.jcarousel.intval(firstItem));
// return false;
})
});
}
Here is Html
<ul class="carosuelList">
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
<li>
<img src="images/products/thumbnail-video.jpg" alt="article video" />
</li>
</ul>
<ul class="hmPagination"><li></li></ul>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是制作分页的脚本
Here is script for making pagination