Трудности с setInterval, setTimeout
Вложений: 1
Я в ообщем только яваскрипт и jquery недавно изучать стал, так что не судите строго.
Короче проблема - пытаюсь сделать чтобы картинки в слайдере сами по себе переключались, ничего не получается. Может, знает кто как исправить? Так же прикрепил к теме архив со скриптом, версткой, css и картинками.
$(document).ready(function() {
function slider() {$('.mini-images a').each(function() {
/*меняем атрибут src большой картинки на значение атрибута href текущей ссылки с миникартинкой
и даем задержку 3 сек (таймаут не работает):*/
setTimeout($('.big-img img').attr('src',$(this).attr('href')), 3000);
});
}
//повторяем функцию slaider каждую секунду - тоже не работает, вместо этого за секунду первая картинка меняется на вторую, сука
setInterval(slider, 1000);
});
//это просто чтобы картинки при клике по превьюшке переключались тут все нормально:
$(document).ready(function() {
$('.mini-images a').click(function(eventObgect) {
$('.big-img img').hide().attr('src',$(this).attr('href'));
$('.big-img img').load(function() {
$(this).fadeIn(500);
});
eventObgect.preventDefault();
});
});
HTML верстка: <div class="slaider"> <div class="big-img"> <img src="images/tachka1.jpg" alt="tachka1" title="tachka"/> </div> <div class="mini-images"> <div class="prev-img"><a href="images/tachka1.jpg"><img src="images/tachka1mini.jpg" alt="tachka1" title="tachka"/></a></div> <div class="prev-img"><a href="images/tachka2.jpg"><img src="images/tachka2mini.jpg" alt="tachka2" title="tachka2"/></a></div> <div class="prev-img"><a href="images/tachka3.jpg"><img src="images/tachka3mini.jpg" alt="tachka3" title="tachka3"/></a></div> </div> </div> :help: |
У вас
setInterval(slider, 1000);выполняется за меньшее время чем
setTimeout($('.big-img img').attr('src',$(this).attr('href')), 3000);
Может в этом причина ? |
tanto39,
в функции slider недолжно быть перебора а нужен выбор следующей картинки |
tanto39,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.prev-img{
display: inline-block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function ()
{
var a = $('.mini-images a'), len = a.length, indx = 0;
(function slider()
{
$('.big-img img').attr('src',$(a[indx]).attr('href'));
indx = ++indx % len;
window.setTimeout(slider, 3000);
}());
$('.mini-images a').click(function(eventObgect) {
$('.big-img img').hide().attr('src',$(this).attr('href'));
$('.big-img img').load(function() {
$(this).fadeIn(500);
});
eventObgect.preventDefault();
});
})
</script>
</head>
<body>
<div class="slaider">
<div class="big-img">
<img src="images/tachka1.jpg" alt="tachka1" title="tachka"/>
</div>
<div class="mini-images">
<div class="prev-img"><a href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg" alt="tachka1" title="tachka1"/></a></div>
<div class="prev-img"><a href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" alt="tachka2" title="tachka2"/></a></div>
<div class="prev-img"><a href="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-lg.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg" alt="tachka3" title="tachka3"/></a></div>
</div>
</div>
</body>
</html>
|
Класс....
|
Спасибо, посоны!
|
| Часовой пояс GMT +3, время: 10:16. |