图像获胜'Don’一个人淡出后再淡出

images won't fade in after one fades out

本文关键字：淡出 一个人 Don 获胜 图像      更新时间：2023-09-26

我的滑块图像会淡出，但尽管应用了fadeIn，但另一个滑块图像不会出现。我还做了一个函数让它循环，但它不起作用。只有第一个图像淡入淡出，但之后没有其他图像。

js小提琴-http://jsfiddle.net/qust3upk/3/

<div id="slider">
            <img id="pic1" src="images/main-banner.png" alt="main banner" class="main_banner">
            <img id="pic2" src="images/nutrition-banner.png" alt="nutrition banner" class="main_banner ">
        </div>
        <a href="#" class="previous">Previous</a>
        <a href="#" class="next">Next</a>

<script type="text/javascript">
sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
    $('#slider  #pic1').fadeIn(300);
    startSlider();

});
function startSlider(){
    count = $('#slider img').size();
    loop = setInterval(function(){
    $('#slider img').fadeOut(300);
    $('#slider img#' + sliderNext).fadeIn(300);
    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;
    }, 3000)

}

</script>

您引用的图像id错误。尝试：

$('#slider #pic' + sliderNext).fadeIn(300);

此外，您没有使用您的"count"变量。也更改为：

sliderNext = (sliderNext % count) + 1;

重写此代码块：

loop = setInterval(function(){
$('#slider img').fadeOut(300);
$('#slider img#' + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000)

As：

loop = setInterval(function(){
$('#slider img').fadeOut(300);
$('#slider img#pic' + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = (sliderNext === count) ? sliderNext = 1 : sliderNext + 1;
}, 3000); //You should have a semicolon here

您可以在fadeOut效果之后立即调用函数，如

   $('#slider img').fadeOut(300, function(){
       $('#slider img#' +).fadeIn(300);
    });

您可以从这里阅读更多详细信息jquery.fadeOut

当然，你也需要有正确的参考资料。

在您的代码中，对img标记的引用没有正确完成。这就是为什么只有第一个图像淡入淡出然后停止的原因。

这行代码$('#slider img').fadeOut(300);将淡出所有img标记。然后这行代码$('#slider img#' + sliderNext).fadeIn(300);将在id为1（id="1"）的img中淡出，但在您的html中它是id="pic1"。

这是一个有效的代码版本（我确实对它进行了一点修改并修复了这些引用）

<script>
var sliderNext = 1;
jQuery(document).ready(function(){
    jQuery('#slider  img#pic' + sliderNext).fadeIn(300);
    startSlider();
});
function startSlider(){
    var count = jQuery('#slider img.main_banner').size();
    loop = setInterval(function(){
       jQuery('#slider  img#pic' + sliderNext).fadeOut(300, function(){
           sliderNext += 1;
           if(sliderNext > count){
            sliderNext = 1;
           }
           jQuery('#slider img#pic' + sliderNext).fadeIn(300);
        });
    }, 3000)
}
</script>
相关文章：