对 div 进行分组和排序

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

不漂亮，嗯...只是一个可能的方式(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

您需要创建自己的导航控件才能完成这项工作。查看 this page 上的源代码，了解如何完成此操作的示例。它看起来像这样：

<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 进行分组和排序

group and sort divs

javascript

jquery

slidesjs