Question

我希望获取一组屏幕截图并将它们变成一个漫游教程。

我的目标终极产品是幻灯片放映，在每个屏幕上拍摄的图像清晰显示屏幕上的哪个位置进入下一个镜头。当用户点击该区域时，节目将前进。

我在幻灯片放映的另一篇文章中找到了这个jsfiddle：

var interval = undefined;
$(document).ready(function () {
    interval = setInterval(getNext, 2000); // milliseconds
    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);
});

function getNext() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();

    transition($curr, $next);
}

function getPrev() {
    var $curr = $('.slideshow img:visible'),
        $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
    transition($curr, $next);
}

function transition($curr, $next) {
    clearInterval(interval);

    $next.css('z-index', 2).fadeIn('slow', function () {
        $curr.hide().css('z-index', 0);
        $next.css('z-index', 1);
    });

}

.slideshow {
    position: relative;
    /* necessary to absolutely position the images inside */
    width: 500px;
    /* same as the images inside */
    height: 100px;
}
.slideshow img {
    position: absolute;
    display: none;
}
.slideshow img:first-child {
    display: block;
    /* overrides the previous style */
}

<div class="slideshow">
    <img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
    <img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
    <img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
    <img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

我认为我需要做三件事才能让它适合我：

能够定位图像中的下一个按钮。
能够更改下一个按钮的大小（创建不同大小的热点）。
能够按图像更改热点的位置。

感谢您的投入！

Answer 1

您有一个.slideview元素，它相对位于文档中，因此图像可以绝对位于其中。我们将使用相同的技术来定位您的按钮。让我们创建一个新的全球＆＃34;容器：

<div class="global_container">
    <div class="slideshow">
        <img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
        <img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
        <img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
        <img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
    </div>
    <button id="prev">Prev</button>
    <button id="next">Next</button>
</div>

现在在CSS中添加这个类：

.global_container { /* selector for a class called global_container */
    position: relative;
    width: 500px; /* same width as your slider, probably use a couple pixels more */
    height: 100px; /* whatever height you want, usually more than your slider height or equal */
}

现在，由于您的全局容器有position: relative;，因此您可以将元素置于其中（向其CSS中添加position: absolute;）。所以添加到你的CSS：

#prev { /* selector for the element with id="prev" */
    position: absolute;
    top: 45px; /* button will be positioned 45px from the top of the global container */
    left: 10px; /* and 10px from the left of the global container */
}

#next {
    position: absolute;
    top: 45px; /* same as before */
    right: 10px; /* same as before, but from the right of the global container */

    /* you could even set the size of the buttons */
    width: 40px;
    height: 10px;
}

希望这有帮助。

JavaScript幻灯片放映，每个幻灯片的下一个按钮具有不同的位置

1 个答案: