背景滑块img上的下一个/上一个按钮答案

【问题标题】：next/prev buttons on background slider img背景滑块img上的下一个/上一个按钮
【发布时间】：2023-04-04 01:53:01
【问题描述】：

我一直在尝试在设置为背景的滑块上创建下一个/上一个箭头，但没有成功。

它必须具有 4-5 秒切换的自动滑块，但我想添加使用按钮/箭头和幻灯片背景的选项。

有什么帮助吗？

HTML：

<div id="homepage">
    <div class="fadein">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
    </div>
</div>

CSS：

#homepage {
    background-color: black;
    height: 100vh;
    width: 100%;
}
.fadein {
    position: relative;
    height: 100%;
    width: 100%;
}
.fadein img {
    position:absolute;
    height: 100%;
    width:100%;
    z-index: 1;
    object-position: center;
}

JS：

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 6000);
});

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

我为上一个/下一个操作创建了两个按钮：

<div id="homepage">
    <div class="fadein">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
    </div>

    <button onclick="previousSlide()">
      Previous
    </button>
    <button onclick="nextSlide()">
      Next
    </button>
</div>

然后每个按钮一个函数，或者如果你愿意，你可以用一个函数重构两者：

<script>
function previousSlide() {
    $('.fadein :first-child').fadeOut().nextAll('img').fadeIn().end().appendTo('.fadein');
}

function nextSlide() {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}
</script>

这是您要求的行为，现在如果您想改用 img 或 div，您只需更改它们的按钮即可。

【讨论】：

上一个按钮功能有一些故障，当您尝试向后退时，它开始以某种奇怪的方式翻转图像。不知道发生了什么。 :)

【解决方案2】：

 Here is the code to add previous/next actions.

<button id= "plus" class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
    <button id= "plus2"
            class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>

【讨论】：