28.04.2014, 16:05
|
|
Новичок на форуме
|
|
Регистрация: 28.04.2014
Сообщений: 8
|
|
|
Элементарный слайдер элементов.
Всем привет!
Есть отличный пример слайдера элементов на чистом js. Минимум кода и все работает почти как надо!
Подскажите, пожалуйста, уважаемые знатоки... Что мне нужно добавить в скрипт, чтобы элементы менялись случайным образом!?
На данный момент смена происходит по порядку с 1го по 4ый и по кругу дальше. При перезагрузке страницы в любом случае показывается первый элемент.
Надо, чтобы в любом случае всегда показывался случайный и крутилось это все бесконечно!
Буду признателен за помощь!
P.S:
Подключать немыслимые библиотеки и простыни кода НЕ предлагать!
ссылка на слайдер: http://jsfiddle.net/rmBj9/1/
Последний раз редактировалось Felexan, 28.04.2014 в 16:24.
Причина: /
|
|
28.04.2014, 16:11
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
|
|
|
28.04.2014, 16:16
|
|
Новичок на форуме
|
|
Регистрация: 28.04.2014
Сообщений: 8
|
|
Спасибо за оперативный ответ! Я догадывался, что именно эта функция нужна.
Дело в том, что я совершенно новичок в js и мне бы на примере моего скрипта все показать. Куда, чего и сколько!
Наверное, не до конца правильно объяснил проблему!  ) |
|
28.04.2014, 16:31
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
|
Felexan,
посмотрите применение Math.random, а дальше делайте анимацию не на основе next, а на основе Math.random для всех "p" у "anidiv". Только выбирать "р" следует не все, а только непосредственно лежащие в "anidiv", что бы не подтащить "р" внутри "р", если таково написать случайно
|
|
28.04.2014, 17:07
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,135
|
|
|
Случайный показ элементов (банеров)
Felexan,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
p {background-color:pink; cursor:pointer;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
function rund(e, f) {
function d(b) {
for (var a = b.length - 1; 0 < a; a--) {
var c = Math.floor(Math.random() * (a + 1)),
d = b[c];
b[c] = b[a];
b[a] = d
}
return b
}
var a = [],
c = [];
for (i = 0; i < e; i++) a[i] = i + f;
d(a);
return function () {
var b = a.shift();
c.push(b);
1 == a.length && (d(c), a = a.concat(c), c = []);
return b
}
};
var $p = $('#anidiv p'), len = $p.length, num = rund(len, 0);
$p.not(':eq(' + num() + ')').hide();
function InOut() {
$("#anidiv p:visible").delay(5000).fadeOut(600, function () {
$p.eq(num()).fadeIn(600, InOut);
})
};
InOut();
$('#anidiv p').mouseover(function () {
$(this).stop(true, true);
});
$('#anidiv p').mouseout(function () {
InOut();
});
})
</script>
</head>
<body>
<div id="anidiv">
<p>Pause jquery animation on mouseover 1...</p>
<p>Pause jquery animation on mouseover 2...</p>
<p>Pause jquery animation on mouseover 3...</p>
<p>Pause jquery animation on mouseover 4...</p>
</div>
</body>
</html>
Последний раз редактировалось рони, 08.01.2021 в 17:17.
|
|
28.04.2014, 17:17
|
|
Новичок на форуме
|
|
Регистрация: 28.04.2014
Сообщений: 8
|
|
Спасибо! Но у вас подключена библиотека jquery... Это уже не то!
Вот, вроде бы получилось! http://jsfiddle.net/rmBj9/22/
Только возникла новая проблема: Нужно поставить условие, чтобы два раза подряд один и тот же не показывался!
Я это забыл учесть сначала. |
|
28.04.2014, 17:24
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
|
Felexan,
Варианты:
1. сохраняйте на теге атрибут и проверяйте его значение
2. сохраняйте маркер на обработанные элементы в функции и проверяйте, обрабатывалось ли ранее....
Если попадает на тот, который уже был, переходите к следующему...
|
|
28.04.2014, 17:28
|
|
Новичок на форуме
|
|
Регистрация: 28.04.2014
Сообщений: 8
|
|
|
А пример реализации можно, как оно должно выглядеть? Я просто вечно буду с этим разбираться(( Извините, если напрягаю...!
Просто полезное дело получается - многим пригодится.
|
|
28.04.2014, 17:35
|
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
Может я чего-то не понимаю, но по приведенной ссылке тоже подключен jQuery. В чем нативность то? |
|
28.04.2014, 17:43
|
|
Аспирант
|
|
Регистрация: 25.04.2014
Сообщений: 47
|
|
|
Felexan,
при использовании жквери, смотрите в сторону .data, .attr,
без использования жквери, setAttribute
Как мне кажется, это не та тема, в которой следует писать примеры работы с атрибутами и ифами, это все описано на этом ресурсе да и на множестве сторонних.... Достаточно воспользоваться поиском...
Если не способны понять описанное словами, значит следует открывать и читать основы языка..
Последний раз редактировалось M-ka, 28.04.2014 в 17:45.
|
|
|
|
