javascript - slider 连续开关

Question

我有一个 slider ，它使用上一个/下一个按钮在分隔线之间切换。但是当分隔符结束时， slider 停止。如何更改它以便在从一侧(下一个/上一个)到达终点时继续。假设我有 4 个 div，1 2 3 4 我点击下一步..我到达 4，当我点击 4 它应该继续到 1。有什么帮助吗？

HTML:

<div id="wrapper">
    <div id="nav">
        <button id="prev" disabled>&lt;&lt;&lt;</button>
        <button id="next">&gt;&gt;&gt;</button>
    </div>
    <div id="mask">
        <div id="item1" class="item"> <a name="item1"></a>

            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
        <div id="item2" class="item">
            <div class="content">
                <img id="image1" src="http://placehold.it/350x150" />
                <img id="image2" src="http://placehold.it/350x150" />
                <img id="image3" src="http://placehold.it/350x150" />
                <img id="image4" src="http://placehold.it/350x150" />
                <img id="image5" src="http://placehold.it/350x150" />
                <img id="image6" src="http://placehold.it/350x150" />
                <img id="image7" src="http://placehold.it/350x150" />
                <img id="image8" src="http://placehold.it/350x150" />
                <img id="image9" src="http://placehold.it/350x150" />
                <img id="image10" src="http://placehold.it/350x150" />
            </div>
        </div>
    </div>
</div>

CSS:

body {
    margin: 0;
}
#wrapper {
    width: 100%;
    height: 350px;
    /*position: absolute;*/
    top: 0;
    left: 0;
    background-color: white;
    overflow: hidden;
}
#nav button {
    position: absolute;
    top: 100px;

}
#prev {
    left: 40px;

}
#next {
    right: 40px;


}
#mask {
    width: 50000px;
    height: 100%;
    background-color: white;
}
.item {
    width: 1200px;
    height: 100%;
    float: left;
    background-color: white;
}
.content img {
    height: 100px;
    width: 17%;
    float:left;
    margin-right: 10px;
    margin-bottom: 10px;
}
.content {
    width: 50%;
    height: 220px;
    top: 20%;
    margin: auto;
    background-color: white;
    position: relative;
}
.content a {
    position: relative;
    top: -17px;
    left: 170px;
}
.selected {
    background: #fff;
    font-weight: 700;
}
.clear {
    clear:both;
}

JQUERY:

$(document).ready(function () {
    function shift(direction) {
        var
            $mask = $('#mask'),
            $items = $('.item'),
            items = $items.size(),
            currentItem = $mask.data('currentItem'),
            newItem;

        if (currentItem == undefined) {
            currentItem = 0;
        }

        newItem = currentItem + direction;
        $mask.data('currentItem', newItem).animate({
           marginLeft: -newItem * $items.eq(0).width()
        });

        if (newItem == 0) {
            $("#prev").prop('disabled', true);
        } else {
            $("#prev").prop('disabled', false);
        }
        if (newItem == items - 1) {
            $("#next").prop('disabled', true);
        } else {
            $("#next").prop('disabled', false);
        }
    }

    $('#prev').click(function () {
        return shift(-1);
    });
    $('#next').click(function () {
        return shift(1);
    });

    function resizePanel() {
        width = $(window).width();
        height = $(window).height();

        $('#wrapper, .item').css({
            width: width,
            height: height
        });
    }

    $(window).resize(function () {
        resizePanel();
    });
    resizePanel();
});

JSFIDDLE:http://jsfiddle.net/909zce06/7/

Answer 1

我稍微更改了代码以适应图像的循环转换。

我做了什么:

• 禁用上一个/下一个按钮的代码已删除，因为它会限制图像的循环滑动。
• 添加了额外的代码来处理 slider 到达末端(任一方向)时的转换。

JS代码(相关代码):

$('#prev').click(function () {
    if (newItem === 0) {
        newItem = itemCount - 1;
    } else {
        newItem--;
    }
    return shift();
});
$('#next').click(function () {
    if (newItem === itemCount - 1) {
        newItem = 0;
    } else {
        newItem++;
    }
    return shift();
});

现场演示@JSFiddle:

http://jsfiddle.net/dreamweiver/909zce06/12/

建议:如果您打算使用更多功能扩展当前的 slider ，那么我建议您使用一些现有的 slider 插件，“既然已经有了，为什么还要重新发明轮子”.