Question

我有一个可排序的缩略图列表。该设计需要自定义滚动按钮而不是滚动条或使用默认的可排序滚动。

我需要知道如何使用左/右按钮来滚动图像列表。

这是一个小提琴：http://jsfiddle.net/helto/XESpE/3/

HTML：

<div class="images">
<div id="thumbnails" class="thumbnails">Current Images:
    <br>
    <div id="list" class="thumbnailList"></div>
    <input type="button" id="thumbnavLeft" value="" class="thumbnavLeft"
    />
    <input type="button" id="thumbnavRight" value="" class="thumbnavRight"
    />
</div>
</div>

CSS：

 .images {
    width: 470px;
    height: 230px;
    float: right;
    /*background-color: #000099;*/
    border: 1px solid #000000;
}
.thumbnails {
    width: 430px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position: relative;
}
.thumbnavLeft {
    background: url(http://s21.postimage.org/3kjh0954j/ft_imgnav_left.png) no-repeat;
    width: 24px;
    height: 71px;
    cursor: pointer;
    border: none;
    position: absolute;
    top: 20px;
}
.thumbnavRight {
    background: url(http://s23.postimage.org/k0ah3rio7/ft_imgnav_right.png) no-repeat;
    width: 24px;
    height: 71px;
    cursor: pointer;
    border: none;
    position: absolute;
    right: 0px;
    top: 20px;
}
.thumbnailList {
    background-color: #d0d0d0;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid #000000;
    height: 69px;
    margin: 0px 24px;
}
.item {
    background-image: url(http://s14.postimage.org/a4i2upfd9/noimage.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    height: 60px;
    width: 80px;
    visibility: visible;
    left: 0px;
    margin: 4px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #000000;
    position: relative;
}
.thumbClose {
    background: url(http://s14.postimage.org/4dwhupwr1/ft_imgnav_x.png) no-repeat;
    width: 7px;
    height: 9px;
    cursor: pointer;
    border: none;
    position: absolute;
    right: 0;
    padding: 2px;
    margin: 2px;
}
.parent {
    height: 80px;
    width: 400px;
}
.placeholder {
    height: 40px;
    width: 20px;
    display: inline-block;
    margin: 4px;
}
.placeholder {
    height: 1px !important;
}

JS：

    $(document).ready(function () {
    // testing image thumbnails
    for (var i = 0; i < 10; i++) {
        var $newdiv = $('<div class="item" name="ghost.jpg"><input type="button" class="thumbClose"/></div>');
        $("#list").append($newdiv);
    }
    // initialize sortable thumbnails
    $(function () {
        $('#list').disableSelection().sortable({
            scroll: false,
            placeholder: 'placeholder',
            containment: 'parent',
            axis: 'x'
        });
    });
    $('#list').on('click', 'input', function (event) {
        var fileName = $(this).parent().attr('name');
        $(this).parent().remove();
    });
    $('#thumbnavLeft').on('click', function (e) {
        $('#list').css('left', '50');
    });
});

Answer 1

Jquery有scrollLeft函数，你可以使用它：http://api.jquery.com/scrollLeft/

var position = 0; 

$('#thumbnavRight').on('click', function (e) {
    $('#list').scrollLeft(position+=500);
});

$('#thumbnavLeft').on('click', function (e) {
    $('#list').scrollLeft(position-=500);
});

基本工作示例：http://jsfiddle.net/basarat/XESpE/5/

自定义滚动jquery ui可排序

1 个答案: