Question

我从零开始制作了一个JQuery轮播，到目前为止，代码很好，而且效果非常好。

主要问题是当我尝试在fadeIn函数旁边使用fadeOut函数时，图像堆叠在一起。

我无法弄清楚如何让它们重叠。

我试着玩绝对定位，但没有运气。

时，您可以清楚地看到它

HTML

<div class="carousel">

    <div id="background-slideshow">

        <div style="display: none;" id="img1" class="slides">
           <img src="/2015/03/Carosuel2.png">
            <div class="textblock">
                <p class="carousel-text1">Slider 1</p>
                <p class="carousel-text2">His nose gets into everything</p>
            </div>
        </div>
        <div style="display: block;" id="img2" class="slides">
           <img src="/2015/03/Carosuel.png">
            <div class="textblock">
                <p class="carousel-text1">Slider 2</p>
                <p class="carousel-text2">His nose gets into everything</p>
            </div>
        </div>
        <div style="display:none;" class="SlideJSON">2</div>
    </div>

</div>

JS

jQuery(document).ready(function($) {

var slides= $(".JSONNumber").html();

var slides= parseInt(slides);

var animateInterval;
var i = 1;
var x = 2;

function animate() {


    $("#img" + i).fadeOut(2000)
    $("#img" + x).fadeIn(2000);


    if (i == slidenumber) { 

        $("#img1").fadeIn(2000);

        i = 1;
        x = 2;

    } else {
        i++;
        x++;
    }

}

animateInterval = setInterval(animate, 3000);


})

Answer 1

根据您的HTML，您使用的选择器是错误的。

$("#img" + i)

应该是

$("#slideimg" + i)

Answer 2

在幻灯片css中

，只需添加display: inline-block;

即可

图像无法正确隐藏

2 个答案: