Javascript 如何使用jQuery将“下一步”和“上一步”按钮添加到幻灯片中？

我有一个幻灯片，可以通过计时器自动切换到下一张图片，但我想通过暂停和切换到下一张或上一张图片来添加更多功能。我很困惑如何添加这些事件处理程序

$（文档）.ready（函数（）{
var nextSlide=$（“#幻灯片img:first child”）；
var下一选择；
var-nextSlideSource；
//运行幻灯片放映的功能
var runSlideShow=function（）{
美元（“#标题”）。淡出（1000）；
美元（“#幻灯片”）。淡出（1000，
函数（）{
if（nextSlide.next（）.length==0）{
nextSlide=$（“#幻灯片图像：第一个孩子”）；
}
否则{
nextSlide=nextSlide.next（）；
}
nextSlideSource=nextSlide.attr（“src”）；
nextoption=nextSlide.attr（“alt”）；
$（“#幻灯片”）.attr（“src”，nextSlideSource）.fadeIn（1000）；
$（“#标题”）.text（下一选项）.fadeIn（1000）；
}
)
}
//开始幻灯片放映
var定时器=设置间隔（runSlideShow，3000）；
})

正文{
字体系列：Arial、Helvetica、无衬线字体；
宽度：380px；
保证金：0自动；
填充：20px；
边框：3件纯蓝；
}
h1，h2，ul，p{
保证金：0；
填充：0；
}
h1{
垫底：25em；
颜色：蓝色；
}
氢{
字体大小：120%；
填充：.5em0；
}
img{
高度：250px；
}
#幻灯片图像{
显示：无；
}
#钮扣{
边缘顶部：.5em；
文本对齐：居中；
}

Xochitl Menjivar
钓鱼幻灯片放映
向上层国王施压

正在工作

对于播放/暂停，您可以这样做

$('#play').on('click', function(e){
    e.preventDefault();
    isPaused = !isPaused;

    if(isPaused){
        $('#play').val('Play');
        window.clearInterval(timer);
    } else {
        $('#play').val('Pause');
        timer = setInterval(runSlideShow, 3000)
    }
})

声明用于跟踪播放/暂停状态的变量。当它处于暂停状态时，清除

timer

interval，如果状态为play，则再次设置interval

timer

此外，您还可以在

runSlideShow（）函数中添加此标志

var runSlideShow = function() {
    if(!isPaused){
        $("#caption").fadeOut(1000);
        $("#slide").fadeOut(1000,
            function () {
                findNextSlide()
                nextSlideSource = nextSlide.attr("src");
                nextCaption = nextSlide.attr("alt");
                $("#slide").attr("src", nextSlideSource).fadeIn(1000);                  
                $("#caption").text(nextCaption).fadeIn(1000);
            }
        )
    }
}

点击事件会很短

$('#play').on('click', function(e){
    e.preventDefault();
    isPaused = !isPaused;
})

对于下一张幻灯片，只需清除一个选项，然后启动
runSlideShow
，这将自动强制获取具有所有效果的新幻灯片

显示上一张幻灯片时，您可以使用相同的逻辑，而不是查找下一张幻灯片，只需查找上一张幻灯片即可。jQuery有一个函数
.prev（）
，它与
.next（）

编辑：

function findPreviousSlide(){
    if (nextSlide.prev().length == 0) {
        nextSlide = $("#slides img:last-child");
    }
    else {
        nextSlide = nextSlide.prev();
    }
}

工作

对于播放/暂停，您可以这样做

$('#play').on('click', function(e){
    e.preventDefault();
    isPaused = !isPaused;

    if(isPaused){
        $('#play').val('Play');
        window.clearInterval(timer);
    } else {
        $('#play').val('Pause');
        timer = setInterval(runSlideShow, 3000)
    }
})

声明用于跟踪播放/暂停状态的变量。当它处于暂停状态时，清除
timer
interval，如果状态为play，则再次设置interval
timer

此外，您还可以在
runSlideShow（）函数中添加此标志

var runSlideShow = function() {
    if(!isPaused){
        $("#caption").fadeOut(1000);
        $("#slide").fadeOut(1000,
            function () {
                findNextSlide()
                nextSlideSource = nextSlide.attr("src");
                nextCaption = nextSlide.attr("alt");
                $("#slide").attr("src", nextSlideSource).fadeIn(1000);                  
                $("#caption").text(nextCaption).fadeIn(1000);
            }
        )
    }
}

点击事件会很短

$('#play').on('click', function(e){
    e.preventDefault();
    isPaused = !isPaused;
})

对于下一张幻灯片，只需清除一个选项，然后启动
runSlideShow
，这将自动强制获取具有所有效果的新幻灯片

显示上一张幻灯片时，您可以使用相同的逻辑，而不是查找下一张幻灯片，只需查找上一张幻灯片即可。jQuery有一个函数
.prev（）
，它与
.next（）

编辑：

function findPreviousSlide(){
    if (nextSlide.prev().length == 0) {
        nextSlide = $("#slides img:last-child");
    }
    else {
        nextSlide = nextSlide.prev();
    }
}

因此，对于上一个按钮，我应该执行类似$（“#slide”）.prev（）的操作吗；要检索上一张幻灯片？我对jQuery还是新手，所以我仍然不知道如何使用所有这些方法。没错。试着每天抽出几分钟来访问jQueryAPI并查看示例；）因此，对于上一个按钮，我应该执行类似$（“#slide”）.prev（）的操作吗；要检索上一张幻灯片？我对jQuery还是新手，所以我仍然不知道如何使用所有这些方法。没错。试着每天抽出几分钟来访问jQueryAPI并查看示例；）