如何在一个简单的jquery幻灯片代码中添加上一个和下一个按钮

How to add prev and next button in a simple jquery slideshow code

本文关键字：代码 幻灯片 添加 上一个 按钮 下一个 jquery 简单 一个      更新时间：2023-09-26

我在这个博客中为下面的幻灯片找到了这个简单的jQuery代码。

http://leavesofcode.net/2012/08/17/simple-slideshow/

它在我现在正在做的项目中非常有效，我可以用jQuery load()函数调用图像，幻灯片仍然有效。尽管如果可能的话，我希望在同一代码中实现上一个和下一个按钮。如有任何帮助，我们将不胜感激。请帮忙，谢谢。

这是代码：http://jsfiddle.net/mblase75/CRUJJ/

<script>
$(document).ready(function() {
    setInterval(function() {
        var $curr = $('.slideshow img:visible'), // should be the first image
            $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
            // if there isn't a next image, loop back to the first image
        $next.css('z-index',2).fadeIn('slow', function() { // move it to the top
            $curr.hide().css('z-index',0); // move this to the bottom
            $next.css('z-index',1);        // now move it to the middle
        });
    }, 6000); // milliseconds
});
</script>
<div class="slideshow">
    <img src="first-image.jpg" width="500" height="100" alt="first image">
    <img src="second-image.jpg" width="500" height="100" alt="second image">
    <img src="third-image.jpg" width="500" height="100" alt="third image">
    <img src="fourth-image.jpg" width="500" height="100" alt="fourth 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>

您需要为getNext和getPrevi创建函数，并将它们作为事件处理程序附加到您想要在幻灯片中前后移动的元素上。

我创建了一个由getNext和getPrevi函数共享的公共转换函数，以便可以共享转换代码。

在下面的示例中，单击下一个或上一个按钮将暂停幻灯片放映，尽管很容易更改它以继续自动转换。

工作演示

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

在下一个按钮的点击事件中使用您的代码。类似这样的东西：

    $("#button_id").click(function(){
all your lines in **setInterval**
});

对于上一个按钮，请使用.prev而不是.next

响应式幻灯片放映免费jquery脚本

我最近在一个项目中使用了上面的脚本，它响应迅速，重量轻，无论有没有按钮都可以完全自定义。我的建议。。

在HTML中添加几个img，如下所示：

<div class="slideshow">
    <img src="first-image.jpg" width="500" height="100" alt="first image">
    <img src="second-image.jpg" width="500" height="100" alt="second image">
    <img src="third-image.jpg" width="500" height="100" alt="third image">
    <img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>
<img src="prev.jpg" width="50" height="50" id="imgPrev">
<img src="next.jpg" width="50" height="50" id="imgNext">

并像这样更改您的javascript：

    $(document).ready(function() {
        $("#imgNext").click(function() {
             var $curr = $('.slideshow img:visible'),
                 $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
                $next.css('z-index',2).fadeIn('slow', function() {
                $curr.hide().css('z-index',0);
                $next.css('z-index',1);
            });
    });
        $("#imgPrev").click(function() {
             var $curr = $('.slideshow img:visible'),
                 $prev = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
                $prev.css('z-index',2).fadeIn('slow', function() {
                $curr.hide().css('z-index',0);
                $prev.css('z-index',1);
            });
        });
        set
Interval(function() {
        var $curr = $('.slideshow img:visible'), 
            $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
        $next.css('z-index',2).fadeIn('slow', function() {
            $curr.hide().css('z-index',0);
            $next.css('z-index',1);
        });
    }, 6000); // milliseconds
});

我在fiddler上用你的代码试过了，它有效：）

我知道这是旧的，但更正以下内容：

$('.slideshow :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('#slideshow');
.slideshow {
    width: 100%;
    position: relative;
    height: auto;
}
.slideshow img:first-child { position:relative; } /*auto height adjust*/
.slideshow img {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    height: auto;
    position: absolute;
}

只是想找出一个反面。以上都很好，但是过渡，呃，并不顺利。在这个问题上使用类是有原因的。

尝试

 $('.next').click(function(){ 
     $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
   })
相关文章：