2张照片后JavaScript淡入速度太快

Question

我在javascript中有一个小问题，在2张图片后，它的渐隐效果与其他图片一样慢：点击我！ 我已经不知道要做什么了，我已经尽力修复了它，但是没有成功。 注意：对此，我是菜鸟，所以请尝试尽可能简单地解释一下:)

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>

Answer 1

这里的问题似乎是startSlider() ， fadeIn()和fadeOut()同时发生（您可以使用chrome inspect元素观察到这一点。当前图像和下一张图像的内联css样式应显示同时更改了不透明度），因此您应在fadeIn完成时调用fadeOut()作为回调

SliderInt = 1; slideNext = 2;

$（document）.ready（function（）{$（“＃slider> img＃1”）。fadeIn（4000）; startSlider（）; $（“＃slider> img＃” + slideNext）.fadeIn（4000）; }）;

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

    loop = setInterval(function () {

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

        $("#slider > img").fadeOut(4000, function () {
            $("#slider > img#" + sliderNext).fadeIn(4000);
        });

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 10000);

}

Answer 2

您的fadeIn和fadeOut异步发生。 （看起来，您希望图像同时变淡，就像平滑过渡一样。）因此，当您具有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);
});

2张照片后JavaScript淡入速度太快

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-02-21 23:58:10

解决方案2
0 2014-02-22 00:17:31

2张照片后JavaScript淡入速度太快

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-02-21 23:58:10

解决方案2 0 2014-02-22 00:17:31

解决方案1
0 已采纳 2014-02-21 23:58:10

解决方案2
0 2014-02-22 00:17:31