Question

我使用以下代码在页面中构建图像轮播。我添加了一些JS代码，以便在点击它们时滚动到特定图像，但它没有按照我的预期工作。也就是说，当我点击图像时，我希望div能够滚动到该特定图像。

有什么想法吗？任何帮助将不胜感激。

谢谢！

HTML：

<div class="carousel-frame">
    <ul>
        <li class="carousel-item">
            <img width="600" height="400" src="img01.jpg" />
        </li>
        <li class="carousel-item">
            <img width="600" height="400" src="img02.jpg" />
        </li>
        <li class="carousel-item">
            <img width="600" height="400" src="img03.jpg" />
        </li>
        <li class="carousel-item">
            <img width="600" height="400" src="img04.jpg" />
        </li>
    </ul>
</div>

CSS：

.carousel-frame {
    width: 100%;
    margin-bottom: 2em;
    padding-bottom: 1em;
    overflow-x: scroll;
    white-space: nowrap;
}

.carousel-frame ul {
    margin: 0;
    padding: 0;
    height: 100%;
    list-style: none;
}

.carousel-frame li {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 0;
}

JS：

$('.carousel-frame .carousel-item').on('click', function(e) {
    var slideWidth = $(this).width();
    var scrollTo = $(this).position().left;
    var offset = scrollTo - (slideWidth / 2);
    $(this).parent().parent().animate({
        scrollLeft: offset
    }, 500);
    e.preventDefault();
});

FIDDLE：

https://jsfiddle.net/occrnja9/9/

Answer 1

我设法找到了解决方案。

JS：

$('.carousel-frame .carousel-item').on('click', function(e) {
    var container = $(this).parent().parent();
    var slideWidth = $(this).width();
    var frameWidth = container.width() / 2;
    var slidePosition = $(this).position().left;
    var offset = container.scrollLeft() + slidePosition - frameWidth + slideWidth / 2;
    container.animate({
        scrollLeft: offset
    }, 500);
    e.preventDefault();
});

FIDDLE：

https://jsfiddle.net/occrnja9/10/

单击以在溢出的水平div

1 个答案: