Question

我一直在寻找这里的不同帖子，但是没有什么真的有用，除了这一个我将要向你展示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;                
    })();

我真诚地感谢任何帮助！

Answer 1

jsBin demo

您不能同时对2个背景图像进行X淡化，因为元素仅支持一个BG图像。至少不重叠背景图像。（如果我错了，请纠正我）
相反您可以阅读您的网址，创建真实图片，并将其附加到所需元素：

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);

将导致1300ms淡入淡出; 9000暂停;从“1st”图像开始（默认）。要跳过某些默认值以达到属性，您可以执行以下操作：

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

将翻译成：default Fade（700）;默认暂停（3000）;但从第2张图片开始。

编辑如果您想要使用背景图片，请执行以下操作：

jquery background div幻灯片？

1 个答案:

jsBin demo

jsBin demo 2