我正在尝试让 JQuery Cycle 插件将幻灯片效果应用于第一张幻灯片。有一个例子展示了如何淡入它,但我使用的是blindX效果,所以如果我在加载时从右向左滑动图像会看起来更好。
有任何想法吗?
谢谢,
塞巴斯蒂安X
我正在尝试让 JQuery Cycle 插件将幻灯片效果应用于第一张幻灯片。有一个例子展示了如何淡入它,但我使用的是blindX效果,所以如果我在加载时从右向左滑动图像会看起来更好。
有任何想法吗?
谢谢,
塞巴斯蒂安X
您可以自己轻松完成。使所有幻灯片,除了第一个,最初隐藏。然后将第一张幻灯片放置在幻灯片视口(包含元素)的右侧。然后,在加载时,使用“左”属性对其调用动画。
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');
});
谢谢 Ł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
});
});