Imageslider jQuery
Hi everyone (this is my first thread here)
I'm making an "imageslider" (but with div:s) with jquery. The question is, How do i hide my scrolling elements outside of the div with the border?
(I'm new here so i cant do post with links so i deleted them) The code:
<script type="text/javascript">
var pos = 1;
$(document).ready(function(){
console.log("possition: " + pos);
var slides = $('#container .element');
var numberOfSlides = slides.length;
console.log("antal slides: " + numberOfSlides);
$('#right').click(function(){
if(pos<=numberOfSlides-1){
//$('#container div.element').animate({"left" : '+=200px' }, 1000, function() {pos++;});
$('#container div.element').animate({"left" : '+=200px' }, 1000 );
pos++;
console.log("possition: " + pos);
}
else{
$('#container div.element').animate({"left" : '-=400px' }, 1000);
pos=1;
console.log("possition: " + pos);
}
});
$('#left').click(function(){
if(pos>1){
$('#container div.element').animate({"left" : '-=200px' }, 1000);
pos--;
console.log("possition: " + pos);
}
else {
$('#container div.element').animate({"left" : '+=400px' }, 1000);
pos=3;
console.log("possition: " + pos);
}
});
});
</script>
<div id="container">
<div id="element1" class="element">3</div>
<div id="element2" class="element">2</div>
<div id="element3" class="element">1</div>
</div>
<link id="left" class="slideLink"><</link>
<link id="right开发者_JAVA技巧" class="slideLink">></link>
easiest thing would be to use an existing plugin like this:
http://www.gmarwaha.com/jquery/jcarousellite/
Otherwise have you tried adding styling to your container div
#container { overflow:hidden; }
精彩评论