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

Question

感谢您提前查看此问题。

作为一个jQuery初学者，我正在试图结合2个脚本来创建一个更流畅的结果..并且它不太好。

问题发生在内容div淡入和淡出在不同时间的背景。大约3次改变后，周期可以开始重叠。我已经尝试了所有我能想到的计时组合，所以我认为也许唯一真正的解决方案是组合脚本。第二个问题是内容更改没有淡入淡出。因此，如果我在不同背景下将内容div设置为100％x100％，平滑效果就会丢失。

最终目标：拥有不同背景和内容的Content Div每7-8秒顺利更换一次。

目前，这是我所：

SCRIPT

<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，并将它们放在一个容器中。 In this 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; 

} 

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

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