图像未正确隐藏

Image not hiding correctly

本文关键字：隐藏 图像      更新时间：2023-09-26

我从头开始做了一个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);

})

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

$("#img" + i)

应该是

$("#slideimg" + i)

在幻灯片css中，只需添加display: inline-block;

相关文章：