Помогите со слайдером пожалуйсто.
Подскажите пожалуйсто что я делаю не так. Не как не могу заставить нормально роботать слайдер.
Что должен далать слайдер. Выводить блоки через указанные пользователем промежутки времени. Что он делает сейчас. Да в прицепе и делает то что надо ,однако у меня не как получается заставить его правильно выставлять тайминг для показа, не как не могу избавится от здвига на 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 сек. Не как не могу нормально цыкл поставить кто сталкивался или просто мозгами богат помогите.:cray: |
Webkraft,
:write: вариант ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.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,
targetImg,
next = timerSlid.size()-1;
timerSlid.css('opacity', 0);
function changeSlide() {
timerSlid.eq(next).animate({'opacity': 0}, 1000);
next = ++next%timerSlid.size();
targetImg = timerSlid.eq(next);
targetImg.animate({'opacity': 1}, 1000);
changeTime = targetImg.data('time') * 1000;
$('#sliderLink').attr({'href': targetImg.data('url'), 'target':targetImg.data('target')});
setTimeout(function() {
changeSlide();
}, changeTime);
}
changeSlide();
}
timerSlider()
</script>
</body>
</html>
|
Спасибо. Хочу такиеже мозги! :victory:
А можно разжевать(расписать), что происходит на 27 строке ? |
Цитата:
(2+1)%3 = 0; (0+1)%3 = 1; (1+1)%3 = 2; |
Модульное деление понял спасибо. Затупил с модульным ...
|
| Часовой пояс GMT +3, время: 22:32. |