JQuery - Custom slider - Restricting the slide when it reaches the end
I've written a custom slider using JQuery to show thumbnails of images. I've a outer div inside which the slider moves. But when the slides come to an end I don't want to slide further (both left and right). How can I do that?
Here is my code - You can save it as html and run it -
<html>
<head>
<title>Content Slider</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
function left() {
$('#inner').animate({
'marginLeft': "-=200px"
}, 1000, function () {
});
}
function right() {
if ($('#inner').css('marginLeft') != "0px" && $('#inner').css('marginLeft') != "auto") {
$('#inner').animate({
'marginLeft': "+=200px"
}, 1000, function () {
});
}
}
</script>
</head>
<body>
<div style="width: 800px; height: 200px; border: 3px solid #DADADA; overflow: hidden;
padding: 5px;">
<div id="inner" style="height: 190px; overflow: hidden;">
<table cellpadding="0" cellspacing="5" style="width: 100%; height: 190px;">
<tr>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div>
</td>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div>
</td>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div>
</td>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div>
</td>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div>
</td>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div>
</td>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div>
</td>
<td valign="middle" align="center">
<div style="width: 200px; height: 100px; background-color: #DADADA">
</div&g开发者_如何学JAVAt;
</td>
</tr>
</table>
</div>
</div>
<table style="width: 800px">
<tr>
<td align="left">
<a href="Javascript:left();"><<</a>
</td>
<td align="right">
<a href="Javascript:right();">>></a>
</td>
</tr>
</table>
</body>
</html>
Any ideas?
I would suggest a check on the total number of images that is not initially shown. In your case it is = grand total - 4 (Shown when the page is initially loaded)- Call it X. Then use some sort of a counter to see that the margin left does not decrease by more than 200*X.
Code implementation:
var x=4; //current total is 8 (-4 gives x)
function left() {
if( parseInt($('#inner').css('marginLeft'))>-x*200){ // 200 is the size of each image
$('#inner').animate({
'marginLeft': "-=200px"
}, 1000, function () {
});
}
}
加载中,请稍侯......
精彩评论