Форум

snovapavel · #1 (**permalink**) 20.09.2016, 06:39

Добрый день!

Есть код, который меняет, слайды через каждые 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

snovapavel,
строка 18

function fade(toFade, imgs) {settings.delay = (6000*Math.random()|0)+2000;

snovapavel · #3 (**permalink**) 02.10.2016, 20:13

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

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

https://jsfiddle.net/f6eh1ujp/

рони · #4 (**permalink**) 02.10.2016, 20:34

snovapavel,
работает, плагин грузите позднее, чем используите.
поставьте в песочнице тип загрузки в меню (javascript) в head

рони · #5 (**permalink**) 02.10.2016, 20:42

snovapavel,
алгоритм не продуман покажет только первый цикл .

snovapavel · #6 (**permalink**) 02.10.2016, 20:43

Поставил, он доходит до третьего слайда и перестаёт работать...

рони · #7 (**permalink**) 02.10.2016, 20:45

Сообщение от snovapavel

перестаёт работать...

работает всё и далее, но уже нечего анимировать.

рони · #8 (**permalink**) 02.10.2016, 21:21

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);
    }

рони · #9 (**permalink**) 02.10.2016, 22:25

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>

join · #10 (**permalink**) 03.10.2016, 09:04

Сообщение от рони

! function go() {

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

Форум

Справочник

Discord чат

Курсы javascript