滑块连续开关答案

【问题标题】：Slider continuous switch滑块连续开关
【发布时间】：2015-06-19 08:42:53
【问题描述】：

我有一个滑块，它使用上一个/下一个按钮在分隔线之间切换。但是当分隔线结束时，滑块停止。如何更改它，以便从一侧（下一个/上一个）到达终点时它会继续。假设我有 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/

【问题讨论】：

不能用任何插件吗？
@PraveenKumar 不是真的
我的意思是，bxSlider 提供了相同的功能，在所有浏览器上进行了测试，等等。你真的应该重新发明轮子吗？
@PraveenKumar 但是这个 bsSlider, shift 分隔符吗？
这是什么意思？

标签： javascript jquery html css

【解决方案1】：

为了适应图像的循环转换，我稍微修改了代码。

我做了什么：

移除了禁用上一个/下一个按钮的代码，因为它会限制图像的循环滑动。
添加了额外的代码来处理滑块到达末端（任一方向）时的过渡。

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/

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

【讨论】：