jQuery - div淡出/淡出-有背景和内容-时间

Question

谢谢你提前看了这个问题。

作为一个jQuery初学者，我正在尝试结合两个脚本来创建一个更流畅的结果。而且进展得不太好。

问题是内容div在不同的时间逐渐淡入并淡出到背景中。约3次变化后，循环开始重叠。我已经尝试了所有我能想到的时间组合，所以我想也许唯一真正的解决方案是组合脚本。第二个问题是内容变化没有褪色。因此，如果我在不同的背景下使内容减少100%x100%，就会失去平滑效果。

的最终目标：有一个有不同背景和内容变化的内容Div，每7-8秒平滑一次。

现在这就是我所拥有的：

剧本

 <script type="text/javascript">
      //Preload images first 
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    var images = Array("http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG", "http://upload.wikimedia.org/wikipedia/commons/8/81/Sky_over_Washington_Monument.JPG", "http://pplus.in.ua/uploads/posts/2014-10/1414742119_pasmur_1.jpg");

    $([images[0],images[1],images[2]).preload();

    // Usage:

    var currimg = 0;

    $(document).ready(function(){

        function loadimg(){

           $('#background').animate({ opacity: 1 }, 500,function(){

                //finished animating, minifade out and fade new back in           
                $('#background').animate({ opacity: 0.7 }, 500,function(){

                    currimg++;

                    if(currimg > images.length-1){

                        currimg=0;

                    }

                    var newimage = images[currimg];

                    //swap out bg src                
                    $('#background').css("background-image", "url("+newimage+")"); 

                    //animate fully back in
                    $('#background').animate({ opacity: 1 }, 500,function(){

                        //set timer for next
                        setTimeout(loadimg,7500);
                    });
                });
            });
         }
         setTimeout(loadimg,9000);

    });
    </script>

    <script type="text/javascript">

    $(document).ready(function(){
    var divs = $('div[id^="content"]').hide(),
        i = 0;

    function cycle() {
        $("#displayArea").html(divs.eq(i).html());
        i = ++i % divs.length; // increment i, and reset to 0 when it equals divs.length
    }

    setInterval(cycle, 9000);

    });
    </script>

CSS

#background {
position : fixed ;
bottom : 0 ;
left : 0 ;
z-index : -100 ;
background-image : url("http://fc02.deviantart.net/fs17/f/2007/153/1/4/Sky_Stock_1_by_PartWish.jpg"); 
width: 100%;
min-height: 100%;
background-position: 50% 20%; 
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.index-caption {
position : absolute ;
left : 50% ;
top : 372px ;
display : block ;
padding : 18px ;
border : none ;
line-height : 1.3em ;
z-index : 1 ;
color : #fff ;
background : rgb(11, 43, 63) ;
text-transform : uppercase ;
font-size : 26px ;
margin-left : -470px;
}

HTML

<div id="background">
</div>

    <div id="displayArea">
        <div class="index-caption">
        Content 1
        </div>
    </div>

<div id="contentA">
    <div class="index-caption">
    Content 2
    </div>
</div>
<div id="contentB">
    <div class="index-caption">
    Content 3
    </div>
</div>
<div id="contentC">
    <div class="index-caption">
    Content 4
    </div>
</div>
<div id="contentD">
    <div class="index-caption">
    Content 5
    </div>
</div>

就像你可以想象的那样，这是非常混乱的，但希望你能看到我想要达到的目标。

任何帮助都将不胜感激。

Answer 1

您可以简单地使用纯CSS :问题是给您的图像提供类或in，并将它们放在容器中。在这个JSFiddle中，AngularJS只用于快速成型。

第二个幻灯片是纯html，因此不需要Javascript。

@-webkit-keyframes fade {
    0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
    5% { opacity:1;  }
    25% { opacity:1;  }
    30% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.0); } 
}

/*  ...  */

#CSS3Slideshow .img1 {
    opacity: 1;
    -webkit-animation:fade_start_opaque_alt 20s linear infinite; 
    -moz-animation:fade_start_opaque 20s linear infinite; 
        -webkit-animation-delay:0s; -moz-animation-delay:0s;

}

当然，您可以通过删除关键帧声明中的“比例”来消除Ken效应。

FYI :20秒除以4张图片->，每个5秒。