Question

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

js fiddle - 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>

Answer 1

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

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

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

sliderNext = (sliderNext % count) + 1;

Answer 2

重写此代码块：

loop = setInterval(function(){

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

sliderInt = sliderNext;
sliderNext = sliderNext + 1;

}, 3000)

如：

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

Answer 3

你可以在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（img）的id="1"中淡出，但在您的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>

一个淡出后图像不会淡入

3 个答案: