4

一段时间以来,我一直在四处寻找不同的帖子,但除了我即将从 jAndy 向您展示的这篇文章之外,没有什么真正有帮助的。

我基本上希望能够将幻灯片放在 div 的背景中。

到目前为止,我有以下代码,但是,正如你所看到的......它淡入,显示图片,淡出到白色,切换图片,然后淡入以显示新图片......我只是希望淡入淡出混合在一起,而不是一个淡出,另一个淡入。我知道这是相当开放的,但有人能指出我正确的方向吗?

 var images = [
       '/slideshow1.jpg',
       '/slideshow2.jpg',
       '/slideshow3.jpg'

   ];
   loop = 0;
   $home = $('#slideme');

   (function fader(){

            $home.fadeOut(1300, function(){
            $home.css('background', 'url(' + images[loop] + ') top center no-repeat');
            $home.fadeIn(1300, function(){
                 setTimeout(fader, 9000);
            });
        });

        if(loop < images.length -1) 
           loop++;
        else loop = 0;                
    })();

我真诚地感谢任何帮助!

4

1 回答 1

2

jsBin 演示

您不能同时对 2 个背景图像进行 X 淡化处理,因为一个元素仅支持一个 BG 图像。至少不重叠背景图像。(如果我错了,请纠正我)
相反,您可以阅读您的 URL,创建真实图像,并将它们附加到所需的元素:

var images = [
   '/slideshow1.jpg',
   '/slideshow2.jpg',
   '/slideshow3.jpg'
]; 

var imagesN = images.length;
var $slideme = $('#slideme');

for(i=0;i<imagesN;i++){
  $('<img>',{ src : images[i] }).appendTo( $slideme );
}

// 现在你的图像被附加了,不要忘记对它们进行 CSS 处理:position:absolute;以获得一个比另一个。

你可以使用我的 jQuery 插件来淡化循环你的图像。该插件允许您在悬停时暂停,也可以单击图像前进

/* FadeMe 'FPS'
// jQuery plugin
// Author: Roko C. Buljan (2012)
// www.roxon.in */
(function($){
    $.fn.fademe = function(F,P,S){
        F=F||700;  //  Fade time (default)
        P=P||3000; //  Pause time (default)
        S=S-1||0;  //  Start from 1st image (default)
        var e=this.children(),T;
        function a(){ e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0); }
        e.on('mouseenter mouseleave click',function(e){
            var m=e.type==='mouseenter'?clearTimeout(T):(e.type==='click'?a():aa());    
        }).eq(S).show().siblings(e).hide();
        function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();
    };
})(jQuery);


$slideme.fademe(); // initiate plugin on your element

通过记住“FPS”,例如:“Frame-Per-Second” :),您可以轻松修改/覆盖插件默认值:

$slideme.fademe(1300, 9000, 1);

这将导致 1300 毫秒的淡入淡出;9000 暂停;从“第一张”图像开始(默认)。要跳过一些默认值以访问属性,您可以执行以下操作:

$slideme.fademe(0, 0, 2); 

这将被翻译成:默认淡入淡出(700);默认暂停 (3000) ; 但从第二张图片开始。


如果您想使用背景图像,请编辑:

jsBin 演示 2

于 2012-09-22T02:28:22.577 回答