Javascript 使用“下一个”和“上一个”操纵滑块

是否可以操纵此滑块，使其通过单击按钮转到上一个项目和下一个项目

目前，可以通过第一个分隔器中的链接（“1 2 3 4 5”）在分隔器之间移动，并通过每个分隔器上的“返回”链接返回到第一个分隔器

HTML:

JavaScript:

$(document).ready(function () {
    $('a.panel').click(function () {
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');
        current = $(this);
        $('#wrapper').scrollTo($(this).attr('href'), 800);
        return false;
    });

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


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

    mask_width = width * $('.item').length;

    $('#debug').html(width + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({
        width: width,
        height: height
    });
    $('#mask').css({
        width: mask_width,
        height: height
    });
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}

---

您需要从项目中删除导航链接，并创建带有按钮的独立导航面板

$（文档）.ready（函数（）{
功能转换（方向）{
变量
$mask=$（“#mask”），
items=$（'.item'）.size（），
currentItem=$mask.data（'currentItem'），
新项目；
如果（currentItem==未定义）{
currentItem=0；
}
新建项目=当前项目+方向；
$mask.data（'currentItem'，newItem）.animate（{marginLeft:-500*newItem}）；
如果（newItem==0）{
$（“#prev”）.prop（'disabled'，true）；
}否则{
$（“#prev”）.prop（'disabled'，false）；
}    
if（newItem==items-1）{
$（“#下一步”）.prop（'disabled'，true）；
}否则{
$（“#下一步”）.prop（'disabled'，false）；
}
}
$（'#prev'）。单击（函数（）{
返回班次（-1）；
});
$（“#下一步”）。单击（函数（）{
返回班次（1）；
});
});
#包装器{
宽度：500px；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
背景色：#ccc；
溢出：隐藏；
}
#导航按钮{
位置：绝对位置；
顶部：100px；
}
#上{
左：40px；
}
#下一个{
右：40px；
}
#面具{
宽度：5000px；
身高：100%；
背景色：#eee；
}    
.项目{
宽度：500px；
身高：100%；
浮动：左；
背景色：#ddd；
}
.内容img{
高度：100px；
宽度：100px；
浮动：左；
保证金权利：4%；
利润底部：6%；
}
.内容{
宽度：45%；
高度：220px；
最高：20%；
保证金：自动；
背景色：白色；
位置：相对位置；
}       
.内容a{
位置：相对位置；
顶部：-17px；
左：170px；
}
.选定{
背景：#fff；
字号：700；
}
.清楚{
明确：两者皆有；
}

您能否创建slider@TusharDemovoy我们可以打开一个聊天室吗Demovoy我如何使它成为一个循环，这样当它经过最后一个分隔符时，它将继续到第一个分隔符？例如，您可以通过
jQuery.clone（）
克隆第一个项，并在最后附加它。之后，当您单击第一个项目上的“上一步”按钮或克隆项目上的“下一步”按钮时，您需要在设置动画之前将整个列表移动到克隆项目（或第一个项目）。您还可以使用许多jQiuery carousel插件之一（）
#wrapper {
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ccc;
    overflow: hidden;
}
#mask {
    width: 5000px;
    height: 100%;
    background-color: #eee;
}    
.item {
    width: 500px;
    height: 100%;
    float: left;
    background-color: #ddd;
}
.content img {
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 4%;
    margin-bottom: 6%;
}
.content {
    width: 45%;
    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;
}

$(document).ready(function () {
    $('a.panel').click(function () {
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');
        current = $(this);
        $('#wrapper').scrollTo($(this).attr('href'), 800);
        return false;
    });

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


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

    mask_width = width * $('.item').length;

    $('#debug').html(width + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({
        width: width,
        height: height
    });
    $('#mask').css({
        width: mask_width,
        height: height
    });
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}