Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2016, 06:39
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Как сделать рандомное время от 2 до 8 секунд у скрипта?
Добрый день!

Есть код, который меняет, слайды через каждые 2 секунды.

Подскажите, пожалуйста, как сделать рандомное время (чтобы оно постоянно менялось) между сменами слайдов, от 2 до 8 секунд?

(function($) {
    $.fn.fader = function(options) {
        var settings = $.extend({
            delay: 2000
        }, options ); 

        $(this).addClass("clearfix").css("overflow", "hidden");
        $(this).find('ul').addClass("clearfix").css("padding", "0px");

        /**
         * Fades out element `toFade`, fading in `toFade+1`
         * If `toFade` is the last element, then the first element will be
         * faded in.
         *
         * @param {Integer} toFade which element to fade out
         * @param {Array} imgs array of jQuery elements
         */
        function fade(toFade, imgs) {
          imgs[toFade].animate({opacity: 0}, settings.delay/2);
          var toShow = toFade === (imgs.length - 1) ? 0 : toFade+1;
          imgs[toShow].animate({opacity: 1}, settings.delay/2);
          setTimeout(function() {  
            fade(toShow, imgs);
          }, settings.delay);
        }

        // find images, and hide them
        var imgs = [];
        $(this).find('ul li').each(function(){
          imgs.push($(this));
          $(this).css({opacity: 0});
        });

        // show the first image, and set a timer to fade it
        imgs[0].css({opacity: 1});
        setTimeout(function(){
          fade(0, imgs);
        }, options.delay/2);
    };
 
}(jQuery));


Активация кода:

$(function(){
  $(".fader").fader({
    delay: 2000
  })
});
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2016, 08:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

snovapavel,
строка 18
function fade(toFade, imgs) {settings.delay = (6000*Math.random()|0)+2000;
Ответить с цитированием
  #3 (permalink)  
Старый 02.10.2016, 20:13
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Сделал так как Вы написали, но не работает...

Подскажите, пожалуйста, что нужно поправить?

https://jsfiddle.net/f6eh1ujp/
Ответить с цитированием
  #4 (permalink)  
Старый 02.10.2016, 20:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

snovapavel,
работает, плагин грузите позднее, чем используите.
поставьте в песочнице тип загрузки в меню (javascript) в head
Ответить с цитированием
  #5 (permalink)  
Старый 02.10.2016, 20:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

snovapavel,
алгоритм не продуман покажет только первый цикл .
Ответить с цитированием
  #6 (permalink)  
Старый 02.10.2016, 20:43
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Поставил, он доходит до третьего слайда и перестаёт работать...
Ответить с цитированием
  #7 (permalink)  
Старый 02.10.2016, 20:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от snovapavel
перестаёт работать...
работает всё и далее, но уже нечего анимировать.
Ответить с цитированием
  #8 (permalink)  
Старый 02.10.2016, 21:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

snovapavel,
можно так ... но половина кода в плагине лишняя, особенно таймеры.
function fade(toFade, imgs) {
      settings.delay = (6000 * Math.random() | 0) + 2000;
      imgs[toFade].animate({
        opacity: 0
      }, settings.delay / 2);
      var toShow = toFade === (imgs.length - 1) ? 0 : toFade + 1;
      imgs[toShow].animate({
        opacity: 1
      }, settings.delay / 2);
      setTimeout(function() {
        fade(toShow, imgs);
      }, settings.delay);
    }

Последний раз редактировалось рони, 02.10.2016 в 21:23.
Ответить с цитированием
  #9 (permalink)  
Старый 02.10.2016, 22:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

fadeTo смена картинок по кругу
snovapavel,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html,body,.fader{margin:0;height:100%; padding: 0;}
  .fader ul{position:relative;list-style:none;height:100%;margin:0;}
  .fader ul li{opacity:0;position:absolute;height:100%;left:0}
  .fader img{height:100%}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    var p = $(".fader li"),
        len = p.length,
        indx = len-1;
    ! function go() {
        p.eq(indx).fadeTo(1200,0);
        indx = ++indx % len;
        p.eq(indx).fadeTo(1200,1);
        window.setTimeout(go, (6000 * Math.random() | 0) + 3200)
    }()
});
  </script>
</head>

<body>
 <div class="fader">
    <ul>
      <li><img src="http://placehold.it/500x500/220022?text=1"></li>

      <li><img src="http://placehold.it/500x500/002200?text=2"></li>

      <li><img src="http://placehold.it/500x500/0000FF?text=3"></li>
    </ul>
  </div>



</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 03.10.2016, 09:04
Аватар для join
Профессор
Отправить личное сообщение для join Посмотреть профиль Найти все сообщения от join
 
Регистрация: 05.03.2012
Сообщений: 477

Сообщение от рони
! function go() {
Рони, что делает перед go() оператор (!) восклицания?
Он там реально незаменим?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поставить анимацию во время работы скрипта? olegalimov Events/DOM/Window 3 24.07.2016 09:44
Как сделать поворот DIV клонов alexgrenn Элементы интерфейса 4 18.04.2016 21:58
как сделать loader во время ajax запроса? FRIE jQuery 17 08.10.2014 09:42
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 15:39
filter(this,this) как правильно сделать? Smip jQuery 5 23.02.2013 03:07