使用下一個和上一個操縱滑塊

Question

可以操縱此滑塊，以便通過單擊按鈕將其轉到上一個項目，然后轉到下一個項目嗎？

當前，可以通過第一個分隔器中的鏈接（“ 1 2 3 4 5”）在分隔器之間移動，並通過每個分隔器上的“后退”鏈接返回第一個分隔器。

HTML：

<div id="wrapper">
    <div id="mask">
        <div id="item1" class="item">
            <a name="item1"></a>
            <div class="content">
                <a href="#item1" class="panel">1</a>
                <a href="#item2" class="panel">2</a>
                <a href="#item3" class="panel">3</a>
                <a href="#item4" class="panel">4</a>
                <a href="#item5" class="panel">5</a>
                <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">
            <a name="item2"></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="item3" class="item">
            <a name="item3"></a>
            <div class="content"><a href="#item1" class="panel">back</a></div>
        </div>
        <div id="item4" class="item">
            <a name="item4"></a>
            <div class="content"><a href="#item1" class="panel">back</a></div>
        </div>
        <div id="item5" class="item">
            <a name="item5"></a>
            <div class="content"><a href="#item1" class="panel">back</a></div>
        </div>
    </div>
</div>

CSS：

#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;
}

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);
}

Answer 1

您需要從項目中刪除導航鏈接，並使用按鈕創建單獨的導航面板。

 $(document).ready(function () { function shift(direction) { var $mask = $('#mask'), items = $('.item').size(), currentItem = $mask.data('currentItem'), newItem; if (currentItem == undefined) { currentItem = 0; } newItem = currentItem + direction; $mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem}); 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); }); }); 

 #wrapper { width: 500px; height: 100%; position: absolute; top: 0; left: 0; background-color: #ccc; overflow: hidden; } #nav button { position: absolute; top: 100px; } #prev { left: 40px; } #next { right: 40px; } #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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item2" class="item"> <div class="content"> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item3" class="item"> <a name="item3"></a> <div class="content"> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item4" class="item"> <a name="item4"></a> <div class="content"> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item5" class="item"> <a name="item5"></a> <div class="content"> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> </div> </div> 

該解決方案尚未完成。 它不會考慮窗口大小的調整。