0

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

有任何想法吗?

谢谢,

塞巴斯蒂安X

4

2 回答 2

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');  
});
于 2011-03-09T22:38:04.197 回答
1

谢谢 Ł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
    });
});
于 2011-03-12T13:37:29.650 回答