Проблема реализации небольшого слайдера
Здравствуйте, нужно прописать некий слайдер. Задача выглядит так:
Имеется массив с некоторым количеством элементов. Нужно по очереди доставать элемент из массива, выводить его на экран, далее через заданный интервал данный элемент исчезает и цикл повторяется (выводится следующий элемент массива и т.д.). При этом, после последнего элемента снова должен выводиться первый, т.е. процесс должен замыкаться. Так и не смог доработать цикл :( |
Иззет,
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body> <p></p><p></p><p></p>
<script>
var p = document.querySelectorAll('p')
var arr = [1,2,3], n = 0;
function slider()
{
p[0].innerHTML=arr[n];
n++;
if(n == arr.length) n = 0;
window.setTimeout(slider, 1000)
};
var arr1 = ['раз','два','три'], n1 = 0;
function slider1()
{
p[1].innerHTML=arr1[n1];
n1 = ++n1%arr.length;
window.setTimeout(slider1, 1000)
};
var arr2 = ['|','||','|||'], n2;
function slider2()
{
n2 = arr2.shift();
arr2.push(n2)
p[2].innerHTML=n2;
window.setTimeout(slider2, 1000)
};
slider();
slider1();
slider2();
</script>
</body>
</html>
|
Спасибо. Адаптировал ваш код, ещё проблема вышла: Дело в том, что элемент массива плавно выводиться и плавно исчезать. Попробовал дописать код, но анимация работает только на 1-ом элементе.
|
Иззет,
а ваш код где? готовое решение на jquery Помогите со слайдером пожалуйсто. и без jquery Автоматическая смена картинок через заданное время поиск по форуму и будут ещё варианты |
Взял за основу ваш код, получилось так:
n = 0;
function slider() {
$('.visible').text(arr[n]).hide().show(500).delay(1500).fadeOut(1000);
n++;
if(n == arr.length) n = 0;
window.setTimeout(slider, 3000)
};
slider();
Дело в том, что данную функцию нужно синхронизировать по времени с другой (с интервалом в 2 сек, та функция сменяет изображения в течение 1 сек). Но после первого цикла функция slider(); начинает отставать по времени, с чем это связано ? |
Иззет,
исключите window.setTimeout и добавьте slider в fadeOut будет вам полная синхронизация |
Иззет,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.visible{
color: #FF0000;
font-size: 24px;
text-decoration: none
}
</style>
</head>
<body>
<a href="#" class="visible">test</a>
<script>
var arr = [1,2,3,4,5]
n = 0;
function slider() {
$('.visible').text(arr[n]).show(500).delay(1500).fadeOut(1000,slider);
n++;
if(n == arr.length) n = 0;
};
slider();
</script>
</body>
</html>
|
Иззет,
наверно я вас не понял но 2 слайдера сложно синхронизировать -- Минимальная задержка таймера делайте всё одним слайдером |
Да, в этом вся загвоздка, потому что цифры я сопоставил точно. Спасибо за помощь и ссылку.
|
| Часовой пояс GMT +3, время: 17:42. |