1

我想从从左到右的 div 制作幻灯片。但不是简单地让当前幻灯片移出并让下一张幻灯片移入，我希望使用循环插件和缓动功能来制作更好的动画。

我正在寻找的动画/过渡描述如下：假设当前幻灯片在视图中，下一张幻灯片应该反弹到当前幻灯片的左侧，有效地将当前幻灯片踢出，然后应该出现新幻灯片. 我已经解决了，但我就是无法正确把握传入和传出幻灯片的时间。

为了完整起见，我使用 jquery 1.8.3, easing 1.3 anc cycle-plugin 2.99

以下是我现在所拥有的，不胜感激。

HTML：

<div id="fixed_box">
    <div class="slide">
        <h4>Slide 1</h4>
    </div>
    <div class="slide">
        <h4>Slide 2</h4>
    </div>
    <div class="slide">
        <h4>Slide 3</h4>
    </div>
    <div class="slide">
        <h4>Slide 4</h4>
    </div>
    <div class="slide">
        <h4>Slide 5</h4>
    </div>
</div>

<style>
    #fixed_box {position:relative; width:300px; height:180px; background-color:000000; color:white; left:100px;}
    .slide {position:relative; width:250px; height:130px; padding:2px 8px; overflow:hidden; background-color:#777777;}
</style>


<script type="text/javascript">
    $(function(){
        $("#fixed_box").before('<div id="nav">').cycle({
            fx: 'scrollRight',          
            timeout: 1000,
            pager: '#nav',
            easeIn: 'easeInBounce',
            easeOut: 'linear',
            speedIn: 2000,
            speedOut: 1000,
            sync: 1000
        });             
    });
</script>
4

0 回答 0