3

我正在使用插件 jCarousel ( http://sorgalla.com/projects/jcarousel/ ) 而不是图像滑入 (就像在“带有自动滚动的旋转木马”演示中一样)

我希望图像淡入。用法是一个自动滚动的 jCarousel，一次只显示一个元素。但是我查看了 Cycle 插件，但它似乎不适用于我的场景，因为我要显示的元素包含文本和图像。

谢谢，如果有人可以帮助解决这个问题。

菲尔

4

6 回答 6

6

即使 jCarousel 只知道滚动幻灯片，您也可以模拟渐变效果：

$('#yourContainer').jcarousel({
    visible: 1,
    scroll: 1, 
    itemLoadCallback: {
        onBeforeAnimation: mycarousel_fadeOut,
        onAfterAnimation: mycarousel_fadeIn
    }
});

function mycarousel_fadeOut(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeOut(); 
}

function mycarousel_fadeIn(carousel) {
    var JCcontainer = carousel.clip.context; 
    $(JCcontainer).fadeIn(); 
}

通过这种方式，您可以在滚动动画开始之前淡出容器，并在完成后将其淡入，除了淡入淡出效果之外看不到任何其他内容。

于 2011-09-14T15:56:38.997 回答
6

试试这个：

var jcarousel = $('#yourContainer');

    jcarousel.jcarousel({
        animation: {
            duration: 0 // make changing image immediately
        }
    });

    // make fadeIn effect
    jcarousel.on('jcarousel:animate', function (event, carousel) {
        $(carousel._element.context).find('li').hide().fadeIn(1000);
    });
于 2013-11-27T13:39:57.930 回答
2

将功能更改为此作品，有点（你可能仍然会看到滚动）：

function mycarousel_fadeOut(carousel) { 
   var JCcontainer = carousel.clip.context; 
   $(JCcontainer).fadeOut(); 
} 

function mycarousel_fadeIn(carousel) { 
   var JCcontainer = carousel.clip.context; 
   $(JCcontainer).fadeIn(); 
}
于 2012-03-16T13:00:31.937 回答
1 
var mycarousel_fadeOut = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeOut(800);
    }
};

var mycarousel_fadeIn = function(carousel, state) {
    if (state !== "init") {
        $(carousel.clip.context).find('img').fadeIn(800);
    }
};
于 2012-05-28T08:37:25.520 回答
1

对于 0.3.x jCarousel 版本，我使用了这个：

   var carousel = $('.jcarousel').jcarousel({
      list        : '.items',
      items       : '.i',
      wrap        : 'both', // for good measure
      animation: {
          duration: 0 // swap slides immediately
      }
   }).jcarouselAutoscroll({
      interval: 1000 * 5,
      target: '+=1',
      autostart: true
   });

   // fade hack
   carousel.jcarousel('items').hide();
   carousel.jcarousel('first').show();
   carousel.on('jcarousel:visiblein', function(event, carousel) {
      $(event.target).fadeIn();
   });
   carousel.on('jcarousel:visibleout', function(event, carousel) {
      $(event.target).fadeOut();
      carousel._trigger('animateend'); // the event doesn't fire when items are positioned absolutely (so autoscroll wouldn't work), fire manually
   });

一些CSS使其工作：

   .items {height: 450px;}
   .i     {position: absolute;}
于 2014-05-07T09:52:05.873 回答
0

Cycle 插件将使用文本和图像。向下滚动到此页面上的回调部分以查看循环处理文本。

于 2009-08-15T15:34:34.093 回答