Question

感谢您提前查看此问题。

作为一个jQuery初学者，我试图结合2个脚本来创建1个更平滑的结果......并且它不太顺利。

问题出现了内容div在不同时间淡入和淡出到背景。在大约3次更改后，循环可以开始重叠。我已经尝试了所有我能想到的时序组合，所以我认为也许唯一真正的解决方案就是组合脚本。第二个问题是内容变化没有消退。因此，如果我使用不同的背景使内容div为100％x100％，则会失去平滑效果。

最终目标：让内容分组具有不同的背景和内容，每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;

}

当然，您可以通过删除＆＃34; scale＆＃34;来消除Ken Burns效应。形成关键帧声明。

FYI：20秒除以4张图像 - ＆gt;每个5秒。

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

1 个答案: