JavaScript在两张图片后消失得太快_Javascript_Html_Css_Slideshow

JavaScript在两张图片后消失得太快

javascript html css

JavaScript在两张图片后消失得太快,javascript,html,css,slideshow,Javascript,Html,Css,Slideshow,我在javascript中遇到了一个小问题，在两张图片之后，它的淡入速度和其他图片一样慢：我不知道该怎么做了，我已经尽力修复了，但没有成功。注意：我对此一无所知，所以请尽可能简单地解释：） Javascript代码： sliderInt = 1; sliderNext = 2; $(document).ready(function() { $("#slider > img#1").fadeIn(4000); startSlider(); $("#slider &g

我在javascript中遇到了一个小问题，在两张图片之后，它的淡入速度和其他图片一样慢：我不知道该怎么做了，我已经尽力修复了，但没有成功。注意：我对此一无所知，所以请尽可能简单地解释：）

Javascript代码：

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
    $("#slider > img#1").fadeIn(4000);
    startSlider();
    $("#slider > img#" + sliderNext).fadeIn(4000);
});

function startSlider() {
    count = $("#slider > img").size();

    loop = setInterval(function() {

        if(sliderNext > count) {
            sliderNext = 1;
            sliderInt = 1;
        }

        $("#slider > img").fadeOut(4000);
        $("#slider > img#" + sliderNext).fadeIn(4000);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 10000);

}

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>MonsterCat | Made By TheRavenBlue</title>
    <link rel="stylesheet" href="css/slider.css">
</head>
<body>
<body style="background-color:black;">

<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>

    <div class="wrapper">

        <div id="slider">
            <img id="1" src="images/image1.png">
            <img id="2" src="images/image2.png">
            <img id="3" src="images/image3.png">
            <img id="4" src="images/image4.png">
        </div>

        <a href="#">Previous</a>
        <a href="#">Next</a>

    </div>

</body>
</html>


怪物猫|由TheRavenBlue制造

这里的问题似乎是in

startSlider（）

、

fadeIn（）

和

fadeOut（）

同时发生（你可以通过使用chrome-inspect元素观察到这一点。当前和下一幅图像的内联css样式应该同时显示不透明度的变化），因此，您应该调用

fadeOut（）

作为完成

fadeIn

滑块=1； sliderNext=2

$（文档）.ready（函数（）{ $（“#slider>img#1”）.fadeIn（4000）； startSlider（）； $（“#slider>img#”+sliderNext）.fadeIn（4000）； });

您的淡入淡出和淡出是异步发生的。（看起来您希望图像同时淡入淡出，就像平滑过渡一样。）因此，当淡入淡出持续时间为4000，循环持续时间为10000时，非过渡时间将为6000。要在淡入淡出调用中等待淡入淡出后，请将回调添加为第二个参数

$foo.fadeIn(4000, fSomeCallback);

相反，使用闭包引用列表，这样就根本不需要引用图像Id

试试这个：

jQuery(function ($) {
    var $slider = $('#slider');
    var $slides = $slider.find('img').hide();
    var iImgIndex = 0;
    var iFadeDuration = 4000;
    var iLoopDuration = 10000;
    var fSwapSlide = function ($in, $out) {
        $in.fadeIn(iFadeDuration);
        if ($out != null) {
            $out.fadeOut(iFadeDuration);
        }
    };
    var fPlayLoop = function () {
        var $out = $slides.eq(iImgIndex);
        iImgIndex++;
        iImgIndex = iImgIndex == $slides.size() ? 0 : iImgIndex;
        var $in = $slides.eq(iImgIndex);
        fSwapSlide($in, $out);
    };
    // init
    fSwapSlide($slides.eq(0), null);
    // to start it 
    var tLoopTimer = setInterval(fPlayLoop, iLoopDuration);
    // to wait till all the images are done loading before you begin:
    //$(window).ready(fPlayLoop);
});

嘿，在我的Mac电脑上，使用最后一款Chrome浏览器时，图像总是以相同的速度褪色！

jQuery(function ($) {
    var $slider = $('#slider');
    var $slides = $slider.find('img').hide();
    var iImgIndex = 0;
    var iFadeDuration = 4000;
    var iLoopDuration = 10000;
    var fSwapSlide = function ($in, $out) {
        $in.fadeIn(iFadeDuration);
        if ($out != null) {
            $out.fadeOut(iFadeDuration);
        }
    };
    var fPlayLoop = function () {
        var $out = $slides.eq(iImgIndex);
        iImgIndex++;
        iImgIndex = iImgIndex == $slides.size() ? 0 : iImgIndex;
        var $in = $slides.eq(iImgIndex);
        fSwapSlide($in, $out);
    };
    // init
    fSwapSlide($slides.eq(0), null);
    // to start it 
    var tLoopTimer = setInterval(fPlayLoop, iLoopDuration);
    // to wait till all the images are done loading before you begin:
    //$(window).ready(fPlayLoop);
});