Witam. Dziś postanowiłem pouczyc się jquery i próbuję aktualnie zrobić slider. Fajnie ładnie przeskakuje na kolejne zdjęcia, ale gdy klikam szybko (po kilka razy dblclicki..) na przycisk od przejscia na kolejne zdjecie, to po tych 3 zdjeciach, przeskakuje mi na białe tło - za zdjęcia. Tak tylko dzieje się gdy szybko klikam, normalnie przechodzi na poczatek wtedy. Tutaj jest timer, próbowalem nim zablokowac te klikanie wiele razy ale nie zawsze zablokuje, albo i wcale.
Dodałem tu do sprawdzenia http://jsfiddle.net/N4cbc/
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var lolek = 0;
$('.slider-nav-next').click(function() {
if(parseInt($('.images').css('margin-left')) < -505)
{
$('.images').animate({marginLeft:'0px'},'fast');
}
else if(lolek == 0)
{
lolek = 1;
$('.images').animate({marginLeft:'-=504px'},'slow');
setInterval(function() { lolek = 0; }, 2500);
}
});
$('.slider-nav-prev').click(function() {
if(parseInt($('.images').css('margin-left')) < 0)
{
if((parseInt($('.images').css('margin-left'))+504) < 0)
{
$('.images').animate({marginLeft:'+=504px'},'slow');
}
else
{
$('.images').animate({marginLeft:'0px'},'slow');
}
}
});
});
</script>
<div class="page">
<div class="top"></div>
<div class="slider">
<div class="images">
<img src="zdj1.jpg" />
<img src="zdj2.jpg" />
<img src="zdj3.jpg" />
</div>
</div>
<div class="slider-nav">
<a href="#" class="slider-nav-prev"><</a>
<a href="#" class="slider-nav-next">></a>
</div>
elo
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 60px;
background: #555;
margin-bottom: 80px;
}
.slider {
height: 300px;
margin: 0px auto;
width: 500px;
overflow: hidden;
border: 1px solid #aaa;
padding: 2px;
}
.images {
float: left;
width: 2000px;
height: 300px;
}
img {
width: 500px;
height: 300px;
margin-left: 0px;
position: relative;
}
.slider-nav {
width: 500px;
margin: 0px auto;
text-align: center;
margin-top: 10px;
}
.slider-nav a {
width: 30px;
height: 20px;
font-size: 20px;
font-weight: bold;
text-decoration: none;
color: #000;
padding: 5px 10px;
background: #ddd;
}
.slider-nav a:hover {
background: #7CC435;
}