Подскажите пожалуйсто что я делаю не так. Не как не могу заставить нормально роботать слайдер.
Что должен далать слайдер.
Выводить блоки через указанные пользователем промежутки времени.
Что он делает сейчас.
Да в прицепе и делает то что надо ,однако у меня не как получается заставить его правильно выставлять тайминг для показа, не как не могу избавится от здвига на 1 позицию вперед.
Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a href="" id="sliderLink" target="_self">Slider link</a>
<div class="timerslide" style="position: relative; width:400px; height:150px;">
<div style="background-color:red; width:400px; height:150px; position:absolute" class="slid1" data-time="5" data-url="http://www.com" data-target="_self">
</div>
<div style="background-color:green; width:400px; height:150px; position:absolute" class="slid1" data-time="10" data-url="http://www.com" data-target="_self">
</div>
<div style="background-color:grey; width:400px; height:150px; position:absolute" class="slid1" data-time="20" data-url="http://www.com" data-target="_self">
</div>
</div>
<script>
function timerSlider() {
var timerSlid = $('div', '.timerslide'),
changeTime = 0,
targetImg = timerSlid.eq(0),
nextImg = timerSlid.eq(1);
timerSlid.not(targetImg).css('opacity', 0);
function changeSlide() {
changeTime = targetImg.attr('data-time') * 1000;
console.log(targetImg.index());
setTimeout(function() {
targetImg.animate({'opacity': 0}, 1000, function() {
});
nextImg.animate({'opacity': 1}, 1000, function() {
$('#sliderLink').attr('href', $(this).attr('data-url'));
$('#sliderLink').attr('target', $(this).attr('data-target'));
targetImg = $(this);
nextImg = targetImg.index() < timerSlid.length -1 ? timerSlid.eq(targetImg.index()+ 1) : timerSlid.eq(0);
});
changeSlide();
}, changeTime);
}
changeSlide();
}
timerSlider()
</script>
</body>
</html>
По сути этого кода он должен выводить 1й див в течении 5 секунд, 2й в течении 10 секунд и 3й в течении 20 секунд. Но получается так что первый и второй выводятся в течении 5 сек. , а третий в течении 10 сек. Соотведственно первый на втором цыкле показывается в течении 20 сек.
Не как не могу нормально цыкл поставить кто сталкивался или просто мозгами богат помогите.
вариант ...
