Доброго времени суток, в процессе изучения js пишу простой слайдер и возникла проблема с навигатором слайдера. Идея такая чтобы при нажатии на определенный элемент навигатора запускать определенное количество раз функцию next или prev, но не хватает умений, чтобы отследить текущий элемент миниатюры и запустить определенное количество раз функцию next или prev. Так же есть вопрос с параметром функции, с тем чтобы запустить ее со своим временем, насколько я догадываюсь в самом функции нужно сделать проверку на то задан ли параметр, если не задан приравнять t=1000, пробовал сделать с помощью .is(), не получилось, возможно есть какой то стандартный прием для этого, не смог догадаться.
html css
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Новый проект</title>
<link href="css/styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/scriptSL.js"></script>
</head>
<body>
<div class='slider'>
<div class="slitem"><img src="first.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="second.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="third.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="forth.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="fifth.jpg" class="slitemimg " alt=""/></div>
<div class="slbtnnext"></div>
<div class="slbtnprev"></div>
<div class="slmiall">
<div class="slmi" > </div>
</div>
</div>
</body>
</html>
<style>
.slider{
position:absolute;
width:500px;
left:33.3333%;
height:300px;
ooooverflow:hidden;
}
.slitem{
position:absolute;
width:inherit;
float:left;
}
.slitemimg{
width:inherit;
}
.slitem.dd{
right:-500px;
}
.slbtnnext{
width:20px;
height:90px;
position: absolute;
right:0;
bottom:0;
top:0;
cursor: pointer;
margin:auto;
background: grey;
}
.slbtnprev{
width:20px;
height:90px;
position: absolute;
left:0;
bottom:0;
top:0;
cursor: pointer;
margin:auto;
background: grey;
}
.slsd{
right:-500px;
}
.slsdl{
left:-500px;
}
.slmi{
width:10px;
height:10px;
background: grey;
float:left;
margin-right:3px;
}
.slmiall{
width:500px;
height:30px;
position: absolute;
bottom:0;
margin:auto;
margin-left: 45%;
margin-right: 30%;
}
.slmialla{
border:solid 1px black;
}
.slnone{
display: none;
}
</style>
js
$(function() {
var $slider=$('.slider');
var $sliderwidth=$('.slider').width();
var $sliderItem=$('.slitem');
var $slnext=$('.slbtnnext');
var $slprev=$('.slbtnprev');
var $minia=$('.slmi');
var m=[]
var i=0;
var n=0;
$sliderItem.not( $sliderItem.eq(0)).addClass("slsd");
for(n=0;n<$sliderItem.length;n++){
m[n] = $minia.clone(true);
$('.slmiall').append(m[n]);
}
//$minia.addClass('slnone');
m[i].addClass('slmialla');
var isRun=false;
$slnext.on('click', next = function(t){
t=1000;
if(isRun){
return
}
isRun=true;
$sliderItem.eq(i-1).css('right', -$sliderwidth);
$sliderItem.eq(i).animate({left: -$sliderwidth}, t, function(){$sliderItem.eq(i-1).css({'right':-$sliderwidth,'left':'auto'});} );
m[i].removeClass('slmialla');
i++;
$sliderItem.eq(i).animate({left: '0'}, t,function(){isRun=false});
//$sliderItem.eq(i-1).css({'right':-$sliderwidth,'left':'auto'});
if(i>$sliderItem.length-1){
i=0;
$sliderItem.eq(i).animate({left: '0'}, t,function(){isRun=false});
}
m[i].addClass('slmialla');
});
$slprev.on('click', function prev(t){
t=1000;
if(isRun){
return
}
isRun=true;
$sliderItem.eq(i-1).css('left', -$sliderwidth);
$sliderItem.eq(i).animate({left: $sliderwidth}, t,function(){$sliderItem.eq(i-1).css({'right':$sliderwidth,'left':'auto'});});
m[i].removeClass('slmialla');
i--;
$sliderItem.eq(i).animate({left: '0'}, t,function(){isRun=false});
if(i<0){
i = $sliderItem.length - 1;
}
m[i].addClass('slmialla');
});
timeSlide=next;
// setInterval(timeSlide,2000)
});