Question

我在画廊中有多少图像，当点击任何图像时，显示在另一个更大的img tag.i上的图像想要实现我可以在images.i之间移动的上一个和下一个按钮。我认为可以使用next（）javascript中的方法，我在下面的例子中找到但是我是js的初学者，我无法完成这项工作。

<script>
var interval = undefined;
$(document).ready(function () {
    interval = setInterval(getNext, 2000); // milliseconds
    $('#next').on('click', getNext);
    $('#prev').on('click', getPrev);

    $('.slideshow a').onclick(function () {
       var src=$('a img').attr("src");
       $('#bigImage img').attr("src",src);
    });
});

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

<div class="slideshow">
    <a href="#"><img src="first-image.jpg" width="150" height="150" alt="first image"></a>
    <a href="#"><img src="second-image.jpg" width="150" height="150" alt="second image"></a>
    <a href="#"><img src="third-image.jpg" width="150" height="150" alt="third image"></a>
    <a href="#"><img src="fourth-image.jpg" width="150" height="150" alt="fourth image"></a>
    ...
</div>
<button type="button" Id="prev">Previous</button>
<button type="button" Id="next">Next</button>
<div id="bigImage">
    <img src="#" width="800" height="600" alt="Big Image">
</div>

<style>
.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 */
}
</style>

请指导我！谢谢！

图库中的图像与下一个和附件之间的移动上一个按钮

0 个答案: