Question

目前，此代码通过按照排列方式选择div元素（连续顺序）来自动淡入和淡出div。我现在要做的是随机选择器，我希望淡入一个随机div，在淡出它之后它将选择另一个随机div并且无限循环该过程。由于我是jQuery的新手并且如此困惑，我也想知道你如何以最简单的方式将这样的过程放在If Else语句上。例如，我将获得数字的值

int num = 1;
If(num == 1){
<!-- Do the process-->
}
Else {
<!-- Do another process by selecting from another set of divs-->
}

以下是代码：

    jQuery.fn.nextOrFirst = function (selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
}

$(document).ready(function () {
    $('div.mb').fadeOut(500);

    var fadeInTime = 1000;
    var intervaltime = 3000;
    setTimeout(function () {
        fadeMe($('div.mb').first());
    }, intervaltime);

    function fadeMe(div) {
        div.fadeIn(fadeInTime, function () {
            div.fadeOut(fadeInTime);
            setTimeout(function () {
                fadeMe(div.nextOrFirst());
            }, intervaltime);
        });
    }
});

Div的：

 <div class="boxes">
      <div class="mb one">1-------------one</div>
      <div class="mb two">2-------------two</div>
      <div class="mb three">3-------------three</div>
 </div>

Answer 1

尝试将nextOrFirst函数更改为：

   jQuery.fn.nextOrFirst = function (selector) {
    var xCount = selector.size();   
    return  Math.floor(Math.random() * xCount ) + 1;
}

不是获得第一个div的下一个，而是获取所有div的计数，和pics 1和X之间的随机数（与选择器的div数）

Answer 2

尝试这样的事情，希望有所帮助

data-reactid

编辑：

     var c=$(".boxes div");
     setInterval(function(){

     $.each(c,function(a,z){
          $("div[class='"+(z.className)+"'").fadeIn();
     });

      var item = c[Math.floor(Math.random()*c.length)];
      var u=item.className;

      $("."+u).fadeOut();
      $("div[class='"+u+"'").fadeOut(1000);

   }, 3000);

FIDDLE LINK：https://jsfiddle.net/bv0jj4wp/29/

Answer 3

不确定这是否正是您想要的但可以修改：

var mb = $('.mb'),   
mbl = mb.length;

mb.hide();
rand();

function rand(){
  var r = getRand(0, mbl);

  mb.eq(r).fadeIn('slow', function(){
    $(this).fadeOut('slow', function(){
      setTimeout(rand, 200);
    });
  });
}


function getRand(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

选择随机div进行自动淡入和淡出

3 个答案: