Question

我正在尝试使用JQuery Cycle插件将幻灯片效果应用于第一张幻灯片。有一个例子展示了如何淡入它但是我正在使用blindX效果，所以如果我在加载时从右向左滑动图像会更好看。

有什么想法吗？

谢谢，

SebastianX

Answer 1

您可以自己轻松完成。最初隐藏所有幻灯片（第一个除外）。然后将第一张幻灯片放置在幻灯片视口（包含元素）的右侧。然后，在加载时，使用“left”属性调用它上面的动画。

HTML

<div id="slides">
  <img>
  <img>
  ...
</div>

CSS

#slides {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

#slides > img {
   position: absolute;
   top: 0;
   left: 0;
   visibility: hidden;
}
#slides > img:first-child {
  left: 100px;
  visibility: visible;
}

加载JavaScript

$('#slides > img:first').animate(
    { left: 0 },
    500,
    function() { $('#slides > img').css('visibility', 'visible');  
});

Answer 2

谢谢Łukasz。你的回答给了我一个主意。我就是这样做的。

CSS - 将第一张幻灯片移出“动画区域”

.slideshow {
   position: relative;
   left: 550px;
   overflow: hidden;}

JavaScript jQuery - $（document）.ready

$('.slideshow').animate({marginLeft:'-550px'},1000, function(){
    $('.slideshow').cycle({
        fx: 'blindX',
        timeout: 1000
    });
});

JQuery.Cycle插件在第一张图片中滑动

2 个答案: