javascript - 图片没有正确隐藏

Question

我从头开始制作了一个 JQuery 轮播，到目前为止，代码还不错，而且效果很好。

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

我不知道如何让它们重叠。

我尝试使用绝对定位，但没有成功。

你上我的网站就可以清楚地看到http://techyhesh.com/Dogs/

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)