Hi everybody
This my testing gallery slider, it will count image's amount, and
prevent it not to outside the wrapper, but I got one problem, if user
click button after the animation finished, it's done well, but if user
click too fast, the js will not catch the left property in time
correctly, how to fix the bug?
CSS
<style type="text/css">
<!--
body { font-size: 12px; }
#wrapper
{
height: 50px;
width: 50px;
overflow: hidden;
position: relative;
border:1px #FF0000 solid;
}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
white-space:nowrap;
}
li
{
display:inline;
margin:0 -3px 0 0;
width:50px;
height:50px;
overflow:hidden;
}
-->
</style>
HTML
<div id="wrapper">
<ul>
<li><img src="1.jpg" border="0" /></li>
<li><img src="2.jpg" border="0" /></li>
<li><img src="3.jpg" border="0" /></li>
</ul>
</div>
<input type="button" name="left" id="left" value="left" />
<input type="button" name="right" id="right" value="right" />
JavaScript
<script language="javascript">
<!--
$(document).ready(function()
{
var wrapper = $('#wrapper');
var ul = $('ul',wrapper);
var itemsWidth = $('li',ul).outerWidth();
var itemsLen = $('li',ul).size();
var maxMove = (itemsLen - 1) * itemsWidth;
var minMove = 0;
var right = $('#right');
var left = $('#left');
right.click(function()
{
if(ul.css('left') != (maxMove * -1) + 'px')
{
ul.animate({left:'-=50px'});
}
});
left.click(function()
{
if(ul.css('left') != minMove + 'px')
{
ul.animate({left:'+=50px'});
}
});
});
//-->
</script>
