Question

我正试图通过我为客户构建的幻灯片来获得灵活的效果。

http://melvilledeli.com/demo/

我在一个页面上有4个单独的幻灯片。

我希望让他们一个接一个地进行淡入淡出过渡。例如）我不想一下子褪色，我希望暂停5秒，然后幻灯片1淡出，然后等待半秒，然后幻灯片2淡化（右上角），然后等待半秒，幻灯片3（左下角）淡出，等待半秒钟，幻灯片4渐弱（右下角）。

我可以改变过渡的速度，但是经过一段时间观看页面后，渐变会变得混乱。

我希望它像繁荣，繁荣，繁荣，繁荣......等待5秒然后，繁荣景气繁荣热潮。

我认为这样看起来不错。

我尝试使用.delay（500）但没有用。

Answer 1

试试这个。我自己没有对它进行过测试，但是每一个都设置了相同的时间段，然后添加一个增加的延迟应该做你想要的。

        $('#slides').slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        }); 

        $('#slides2').delay(500).slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        });                 

        $('#slides3').delay(1000).slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        }); 

        $('#slides4').delay(1500).slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        });

Answer 2

首先，让所有幻灯片播放的“播放”参数保持一致。然后，你可以在这样的'播放'和'暂停'方法之后：

$('#slides, #slides2').slides({
        effect: 'fade',
        crossfade: true,
        preload: true,
        preloadImage: 'images/loading.gif',
        play: 6500,
        hoverPause: false
}); 

$('#slides2').slides('pause').delay(500).slides('play');

这未经过测试，但应根据文档进行操作。

Answer 3

您可以使用超时以灵活的方式进行设置。只需调整值，然后根据需要为幻灯片阵列添加/删除任意数量的幻灯片。

（未经测试，但你应该得到逻辑的要点。）

//"constant" values
var MASTER_DELAY = 5000;
var STAGGER_DELAY = 500;

//Array of four Slideshow objects, DOM nodes ... or whatever they are in your case, and index for said array
var slideshows = [slideshow1, slideshow2, slideshow3, slideshow4];
var nextSlideshowIndex = 0;

var slideshowTimeout = setTimeout('onSlideshowTimeout()', MASTER_DELAY);

function onSlideshowTimeout()
{
  if(nextSlideshowIndex < slideshows.length)
  {
    $(slideshows[nextSlideshowIndex]).animate( /* ... slideshow animation code ... */ );
    slideshowTimeout = setTimeout('onSlideshowTimeout()', STAGGER_DELAY);
    nextSlideshowIndex++;
  }

  else
  {
    slideshowTimeout = setTimeout('onSlideshowTimeout()', MASTER_DELAY);
    nextSlideshowIndex = 0;
  }
}

jquery在幻灯片放映的初始加载时延迟多个函数

3 个答案: