我已经在这里问过同样的问题
之后,我想出了以下代码:
的CSS
div#big_container{
margin:0;
padding:30px;
width: 230px;
height: 130px;
border:1px solid #f0f0f0;
background-color: #f0f0f0;
text-align: center;
z-index:-100;
}
div#container{
overflow: hidden;
width: 207px;
background-color: #f0f0f0;
}
div#content {
position:relative;
}
button#left{
position:absolute;
top:90px;
left:2px;
z-index:1;
}
button#right{
position:absolute;
top:90px;
left:246px;
z-index:1;
}
jQuery的
var size = $("#content table").find('tr').first().find('td').size();
var position = 1;
$("#left").click( function() {
if(position < (size / 2)) {
$('#right').removeAttr('disabled');
$("#content").animate({"right": "+=198px"}, "fast");
position ++;
}else{
$('#left').attr("disabled", "true");
}
});
$("#right").click( function() {
if( position > 1) {
$('#left').removeAttr('disabled');
$("#content").animate({"right": "-=198px"}, "fast");
position --;
}else{
$('#right').attr("disabled", "true");
}
});
html
<button id="left"><<</button>
<button id="right">>></button>
<div id="big_container">
<div id="container">
<div id="content">
<table border="0">
<tr>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
<td class="img_gallery"><img src='http://i53.tinypic.com/1114gbd.gif' border='0' /></td>
</tr>
<tr>
<td>Description1</td>
<td>Description2</td>
<td>Description3</td>
<td>Description4</td>
<td>Description5</td>
<td>Description6</td>
</tr>
</table>
</div>
</div>
</div>
我可以接受,但请观看现场演示
http://jsfiddle.net/bm4G4/
您会看到nxt和prv按钮被禁用,但图片设置完成后并没有立即禁用!您应该再单击一次按钮将其禁用,
如何使这些按钮立即禁用?
谢谢
最佳答案
这应该做
$("#left").click( function() {
if(position < (size / 2)) {
$('#right').removeAttr('disabled');
$("#content").animate({"right": "+=198px"}, "fast");
position ++;
}if(position >= (size / 2)){
$('#left').attr("disabled", "true");
}
});
$("#right").click( function() {
if( position > 1) {
$('#left').removeAttr('disabled');
$("#content").animate({"right": "-=198px"}, "fast");
position --;
}if(position == 1){
$('#right').attr("disabled", "true");
}
});
关于jquery - 如果没有更多图片,请禁用(nxt/prv)按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6259101/