Question

我在jquery滑块中有一系列6张幻灯片。（http://www.slidesjs.com/）

从技术上讲，这些是6张单独的幻灯片，但幻灯片是成对的

Group 1 = Slides 1 + 2
Group 2 = Slides 3 + 4
Group 3 = Slides 5 + 6

我试图将第1,2和3组的顺序随机化，但幻灯片必须在这些组中保持正确的顺序。

目前的标记是

 <div id="slides">
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
    <div class="slide">
    </div>
     <div class="slide">
    </div>
 </div>

我可以将所有幻灯片随机化，但这可能会导致幻灯片混乱并且不会配对。

这可以用数据属性完成吗？我不知道我可以用什么方法来做这件事。

Answer 1

如果您查看该网站上的documentation，可以选择允许您指定起始幻灯片，这样您就可以随机化起始组，但仍然需要保持序列。

要做到这一点，你可以这样做：

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

$(function(){
    var slidesPerGroup = 2;

    $("#slides").slidesjs({
        start: (getRandomInt(1, 3) * slidesPerGroup) - 1
    });
});

Answer 2

it's not beautiful, well... just a possible way (http://jsfiddle.net/bukart/c0fjq19p/1/)

var order = [[1,2],[3,4],[5,6]];

$(function() {
    var neworder = [], oldorder = [];

    oldorder = order; // better you clone here ;)

    while (oldorder.length) {
        var n = Math.floor(Math.random() * oldorder.length);
        neworder.push(oldorder[n]);
        oldorder.splice(n, 1);
    }

    var $slideBox = $('#slides');
    var $slides = $('.slide', $slideBox);

    $slides.detach();

    var $slidesArr = [];
    $slides.each(function() {
        $slidesArr.push($(this));
    });
    for (i = 0; i < neworder.length; i++) {
        for (j = 0; j < neworder[i].length; j++) {
            $slideBox.append($slidesArr[neworder[i][j]-1]);
        }
    }
});

Answer 3

You'll need to create your own navigation controls to make this work. View source on this page for an example of how this can be done. It's going to look something like this:

<div class="controls">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
</div>

<script>
    function selectSlide() {
        var slides = [1, 3, 5]; // This function picks a random number from this array.
        var randomIndex = Math.floor(Math.random() * slides.length);
        return slides[randomIndex];
    }
    $(function() {
        $('#slides').slidesjs({
            width: 940,
            height: 528,
            navigation: {active: false},
        });
        var sjs = $('#slides').data('plugin_slidesjs'); // you can issue commands to the slideshow through this variable
        $('.controls .next').click(function(){
            var currentPage = sjs.data.current;
            console.log("Current page:", currentPage);
            switch (currentPage) {
                case 0:
                case 2:
                case 3:
                    console.log("Going to next slide");
                    sjs.next();
                    break;
                default:
                    console.log("Going to a random slide");
                    sjs.goto(selectSlide());
                    break;
            }
        });
    });
</script>

分组和排序div

3 个答案: