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

Question

感谢您提前查看此问题。

作为jQuery初学者，我正在尝试组合2个脚本来创建1个更流畅的结果......但它进展得并不顺利。

出现内容div 淡入和淡出在不同时间淡入和淡出到背景的问题。经过大约 3 次更改后，周期可能会开始重叠。我已经尝试了我能想到的所有时间组合，所以我认为也许唯一真正的解决方案是组合脚本。第二个问题是内容变化没有褪色。因此，如果我使用不同的背景将内容div设置为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： 问题是给你的图像提供类或ID，并将它们一个放在容器中。在这个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 Burns 效果。

仅供参考：20 秒除以 4 张图像 - 每张图像> 5 秒。