Question

我正在使用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

你的时间。

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

jquery循环高级幻灯片

1 个答案: