Question

我试图在flexslider上随机化幻灯片顺序。随机选项仅允许您在加载时随机化订单。我借助于此拼凑了下面的代码： Flexslider Start at a random slide and then continue loading sequentially

知道我做错了吗？

$(window).load(function() {
  var randomthis = Math.floor((Math.random()* $('.flexslider li').length )+1);
  $('.flexslider').flexslider({
    after: function(slider) {
    startAt: randomthis
    },
  });
});

Answer 1

FlexSlider支持随机化幻灯片。您可以使用以下代码

$(window).load(function() {
    $('.flexslider').flexslider({
        randomize: true
    });
});

根据您的要求，您可以使用以下代码。

$(window).load(function() {
    var randomthis = Math.floor((Math.random()* $('.flexslider li').length ));
    $('.flexslider').flexslider({
        after: function(slider) {
            startAt: randomthis
        },
    });

    // **CAUTION** the below code will remove ALL the setTimeouts
    var highestTimeoutId = setTimeout(";");
    for (var i = 0 ; i < highestTimeoutId ; i++) {
        clearTimeout(i); 
    }

    // This code will add a new setTimeout function for randomizing the
    a = function(){ 
        var newrandval = Math.floor((Math.random()* $('.flexslider li').length ));
        while(randomthis == newrandval){
            newrandval = Math.floor((Math.random()* $('.flexslider li').length ))
        }
        randomthis = newrandval;
        $('.flexslider').flexslider(randomthis); setTimeout(a,3000)
    }
    a();
});

Answer 2

这里是你的代码的工作模型，使用startAt代替函数; http://jsbin.com/kunizo/1/edit?js,output

$(window).load(function() {
  // create function that returns random number
  var random = function(num){
    var numRandom = Math.floor((Math.random()* num ));
    return numRandom;
  };
  // create variable with slides length;
  var slidesLength = $('.flexslider li').length
  // init flexslider and start at random number
  $('.flexslider').flexslider({
    startAt: random(slidesLength)
  });
});

动画后Flexslider随机顺序

2 个答案: