禁用旋转木马中的下一个按钮和上一个按钮
Disable next button and prev button in Carousel
我在像这样的应用程序中使用jquery carousel
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function () {
j('#pagination').jcarousel({
wrap: 'circular'
});
var count = $("#pagination li").size();
if (count < 10)
{
j(".jcarousel-prev").addClass("jcarousel-prev-disabled");
j(".jcarousel-next").addClass("jcarousel-next-disabled");
}
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
var j = jQuery.noConflict();
j(document).ready(function () {
j('#pagination').jcarousel({
wrap: 'circular'
});
var count = $("#pagination li").size();
if (count < 10) {
j(".jcarousel-prev").addClass("jcarousel-prev-disabled");
j(".jcarousel-next").addClass("jcarousel-next-disabled");
}
});
});
</script>
现在的问题是,如果李项目少于10个,它不会禁用下一个按钮和上一个按钮。。。请帮忙!!!
像一样将css添加到类中
.jcarousel-prev-disabled,
.jcarousel-next-disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
更新
使用$("#pagination li").length
而不是$("#pagination li").size()
,您的问题就会得到解决。
我已经下载了jQuery carousel插件,并为您创建了下面的示例。下面的示例将禁用prev&下一个按钮。如果你想完全隐藏它们,你可以使用$(".jcarousel-control-next").css('display', 'none');
<head>
<title>Basic carousel - jCarousel Examples</title>
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<link rel="stylesheet" type="text/css" href="jcarousel.basic.css">
<script type="text/javascript" src="../../vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="jcarousel.basic.js"></script>
<script type="text/javascript">
$(function(){
var imageCount = $("#images li").length;
if(imageCount < 10){
$(".jcarousel-control-next").css('pointer-events', 'none');
$(".jcarousel-control-prev").css('pointer-events', 'none');
}
});
</script>
</head>
<body>
<div class="wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul id="images">
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p class="jcarousel-pagination">
</p>
</div>
</div>
</body>
相关文章:
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 禁用旋转木马中的下一个按钮和上一个按钮
- 如何在用户返回和上一个按钮时刷新下拉列表
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- HTML5历史记录-返回上一个完整页面按钮
- 当我单击下一个或上一个按钮时,datatable显示旧值
- 如何在一个onclick按钮上使用一个javascript函数选择多个文本字段
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 当滑块只有一个图像时,如何禁用下一个/上一个按钮
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 如何在同一页面上的多个按钮上打开一个引导模式
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- 将“下一步”和“上一个”按钮添加到较大的图像
- 如何为滑块的分页按钮创建简单的下一个和上一个触发器按钮
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 单击上一个或继续按钮时更改选项卡样式
- 将下一个和上一个按钮添加到我的图像滑块
- JQuery,引导导航 - 如何添加上一个/下一个按钮
- 如何在cycle2.js中悬停img时同时显示上一个/下一个按钮
- & # 39;回# 39;按钮上一个模态弹出(Ajax模态弹出扩展器)