Question

我在javascript中遇到一点问题，在2张图片之后它会像其他图片在这里看到的那样缓慢淡入：click me!我没有任何线索可以做了我已经尽力修复但是没有更迭。注意：我是一个菜鸟，所以尽量解释：）

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检查元素来观察这一点。当前的两种内联css样式下一张图片应显示同时更改的不透明度，因此您应在完成fadeOut()时调用fadeIn作为回调

sliderInt = 1; sliderNext = 2;

$（document）.ready（function（）{ $（“＃slider＆gt; img＃1”）。fadeIn（4000）; startSlider（）; $（“＃slider＆gt; img＃”+ sliderNext）.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);
});

JavaScript在2张图片后淡入淡出

2 个答案: