0

我正在使用 jQuery 循环插件http://jquery.malsup.com/cycle/，我正在尝试创建类似的滑块效果，如本页http://themeforest.net/item/doover-premium-wordpress-theme/ full_screen_preview/2279114 就是标题和描述在不同时间从不同方向滑动。他们也在使用 jQuery 循环滑块。

我不知道该怎么做。任何建议都会很好，我会很高兴。

这是我的 HTML 代码：https ://gist.github.com/2697871

这是我的 CSS 代码：https ://gist.github.com/2697874

这是我的 JS 代码：https ://gist.github.com/2697877

谢谢你的时间。

4

1 回答 1

1

首先，在javascript中，将当前幻灯片类设置为活动。
然后，在Css中将您的元素位置设置在幻灯片之外

.title{position:absolute; top:0; left:100%; }
.text{position:absolute; top:0; left:-100%;}

最后，在 Css 中，当父级设置为活动时添加一个动画

.active .title{animation: animateTitle 2s 1 ease-out forwards;}
.active .text{animation: animateText 2s 1 ease-out forwards;}

@keyframes animateTitle {
    0%   { left: 100%; }
    100% { left: 0; }
}

@keyframes animateTtext {
    0%   { left: -100%; }
    100% { left: 0; }
}
于 2012-05-14T22:59:18.803 回答