jquery - JQuery.Cycle Plugin 在第一张图片中滑动

Question

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

有任何想法吗？

谢谢，

塞巴斯蒂安X

Answer 1

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

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