Question

我正在使用jquery处理fade in-fadeout横幅。我正在获得输出，但它无法正常运行。

第一个图像淡出，但不是第二个图像淡入..直接第三个图像弹出。

我检查了控制台，显示没有错误。

请查看我的代码并相应地帮助我。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>image slider</title>
    <link rel="stylesheet" type="text/css" href="banner.css">
</head>
<body>
    <div class="banner">
        <div class="banner_divs"></div>
        <div class="banner_divs"></div>
        <div class="banner_divs"></div>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="banner.js"></script>
</body>
</html>

CSS

.banner{
    position: relative;
    height: 400px;
    border: 1px solid;
}
.banner_divs{
    position: absolute;
    border: 1px solid;
    height: 400px;
    width: 700px;   
}
.banner_divs:nth-child(1){
    background-image: url("images/banner1.jpg");
}
.banner_divs:nth-child(2){
    background-image: url("images/banner2.jpg");
}
.banner_divs:nth-child(3){
    background-image: url("images/banner3.jpg");
}

JQuery的

$(document).ready(function(){

    $(".banner_divs:not(:first)").hide();
    setInterval(function(){

        $(".banner_divs:first").fadeOut().next().fadeIn().end().appendTo(".banner");

    },3000);

});

Answer 1

您可以按照以下方式更改图像。

$(document).ready(function(){

    var tid = setTimeout(timer, 3000);
    var $first = $('div:first', '.banner'),
    $last = $('div:last', '.banner');

    function timer() {
        $selected = $(".selected");
        $next = $selected.next('.banner_divs').length ? $selected.next('.banner_divs') : $first;
        $selected.removeClass("selected").fadeOut('fast');
        $next.addClass('selected').fadeIn('fast');
        tid = setTimeout(timer, 3000); 
    }
    function abortTimer() {
        clearTimeout(tid);
    }

});

将display:none;提供给.banner_divs并使用

.selected{
  display:block;
}

<强> Working Fiddle

Reference Link

横幅fadein淡出插件无法正常工作JQuery

1 个答案: