Question

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

它必须有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);
});

Answer 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，则只需更改按钮即可。

Answer 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>

下一个/上一页按钮背景滑块img

2 个答案: