Элементарный слайдер элементов.
Всем привет!
Есть отличный пример слайдера элементов на чистом js. Минимум кода и все работает почти как надо! Подскажите, пожалуйста, уважаемые знатоки... Что мне нужно добавить в скрипт, чтобы элементы менялись случайным образом!? На данный момент смена происходит по порядку с 1го по 4ый и по кругу дальше. При перезагрузке страницы в любом случае показывается первый элемент. Надо, чтобы в любом случае всегда показывался случайный и крутилось это все бесконечно! Буду признателен за помощь! P.S: Подключать немыслимые библиотеки и простыни кода НЕ предлагать! ссылка на слайдер: http://jsfiddle.net/rmBj9/1/ |
Felexan,
http://javascript.ru/Math.random |
Спасибо за оперативный ответ! Я догадывался, что именно эта функция нужна.
Дело в том, что я совершенно новичок в js и мне бы на примере моего скрипта все показать. Куда, чего и сколько! Наверное, не до конца правильно объяснил проблему! :)) |
Felexan,
посмотрите применение Math.random, а дальше делайте анимацию не на основе next, а на основе Math.random для всех "p" у "anidiv". Только выбирать "р" следует не все, а только непосредственно лежащие в "anidiv", что бы не подтащить "р" внутри "р", если таково написать случайно |
Случайный показ элементов (банеров)
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>
|
Спасибо! Но у вас подключена библиотека jquery... Это уже не то!
Вот, вроде бы получилось! http://jsfiddle.net/rmBj9/22/ Только возникла новая проблема: Нужно поставить условие, чтобы два раза подряд один и тот же не показывался! Я это забыл учесть сначала. |
Felexan,
Варианты: 1. сохраняйте на теге атрибут и проверяйте его значение 2. сохраняйте маркер на обработанные элементы в функции и проверяйте, обрабатывалось ли ранее.... Если попадает на тот, который уже был, переходите к следующему... |
А пример реализации можно, как оно должно выглядеть? Я просто вечно буду с этим разбираться(( Извините, если напрягаю...!
Просто полезное дело получается - многим пригодится. |
Цитата:
|
Felexan,
при использовании жквери, смотрите в сторону .data, .attr, без использования жквери, setAttribute Как мне кажется, это не та тема, в которой следует писать примеры работы с атрибутами и ифами, это все описано на этом ресурсе да и на множестве сторонних.... Достаточно воспользоваться поиском... Если не способны понять описанное словами, значит следует открывать и читать основы языка.. |
| Часовой пояс GMT +3, время: 19:01. |