0

我在 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>

我可以将所有幻灯片随机化，但这可能导致幻灯片混乱而不成对。

这可以用数据属性来完成吗？我不确定我可以使用什么方法来做到这一点。

4

3 回答 3

1

如果您查看该站点上的文档，则有一个选项允许您指定起始幻灯片，以便您可以随机化起始组，但从那时起您仍然必须保持序列。

为此，您可以这样做：

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
    });
});
于 2015-10-29T15:33:52.623 回答
0

它不漂亮，嗯......只是一种可能的方式（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]);
        }
    }
});
于 2015-10-29T15:46:44.980 回答
0

您需要创建自己的导航控件来完成这项工作。查看此页面上的源代码以获取有关如何完成此操作的示例。它看起来像这样：

<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>
于 2015-10-29T15:54:28.147 回答