javascript - 如何让轮播图上的文字有动画效果？-PHP中文网问答

最近有个项目需求要让轮播图上的文字有动画效果；
我以前做的都是切一整个banner，然后用一个插件解决。
现在要把背景图层和文字图层一个一个切下来来做，有什么简单快速的方法实现效果吗？

--------------------------分割-------------------------------------

<p class="content">
                <ul>
                    <li style="background-image: url(images/banner1.png)">
                        <p class="bd1-02 wow fadeInLeft" data-wow-delay="0.3s"></p>
                        <p class="c-width">
                            <p class="bd1-01 wow flipInX " data-wow-delay="0s"><img src="images/bd1-01.png"></p>
                            <p class="bd1-03 wow fadeInLeft " data-wow-delay="0.6s"><img src="images/bd1-03.png"></p>
                            <p class="bd1-04 wow fadeInLeft " data-wow-delay="0.8s"><img src="images/bd1-04.png"></p>
                            <a href="#" target="_blank" class="bd1-btn wow fadeInLeft " data-wow-delay="1s">在线了解软件详情</a>
                        </p>
                    </li>
                    <li style="background-image: url(images/banner3.png)" >
                        <p class="c-width">
                            <p class="bd2-02 wow flipInY" data-wow-delay="0s"><img src="images/bd2-01.png"></p>
                            <p class="bd2-box wow zoomInUp" data-wow-delay="0.5s">
                                <a href="" class="bd2-btn">在线了解软件详情</a>
                            </p>
                        </p>
                    </li>
                </ul>
            </p>

使用wow方法的时候，第一页是没有问题，但第二页无法触发动画效果，
必须要跳转到第二页时动一下滚动条才能把动画触发，不知道是什么原因造成的？

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Css3 Images Fade & Slider</title> <style type="text/css"> body { background: #f8f8f8; margin: 0; } img { border: 0; vertical-align: middle; } .focus { width: 800px; margin: 0 auto; position: relative; overflow: hidden; } .images { height: 350px; overflow: hidden; position: relative; } .images .item { position: absolute; top: 0; left: 0; height: 350px; overflow: hidden; opacity: 0; transition: opacity 0.8s linear; -webkit-transition: opacity 0.8s linear; } .images .item img { width: 800px; } .images .active { opacity: 1; } .control { position: absolute; bottom: 10px; width: 100%; text-align: center; } .control span { display: inline-block; cursor: pointer; background: #5fbab1; color: #fff; width: 25px; height: 25px; text-align: center; line-height: 25px; border-radius: 25px; margin: 0 8px; } .control span.active { background: #e77918; } .title { position: absolute; left: 0; top: 30%; width: 100%; } .title p { position: absolute; left: 0; top: 0; background: #000; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 20px 0; margin: 0; text-indent: 10px; width: 300px; opacity: 0; transform: translateX(-300px); -webkit-transform: translateX(-300px); transition: all 0.8s ease-out; -webkit-transition: all 0.8s ease-out; } .title p.active { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); } </style> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function() { $('.images .item:first, .control span:first, .title p:first').addClass('active'); var index = 1, // 设置初始index为1 避免定时器第一次调用index=0没有任何动作多用3秒 len = $('.images .item').length; function autoPlay() { // 注意：index++是指执行完后再自增1，所以index=0时，eq(index++)最开始是eq(0); $('.images .item').removeClass('active').eq(index++).addClass('active'); // 此时index已经+1了 $('.title p').removeClass('active').eq(index - 1).addClass('active'); $('.control span').removeClass('active').eq(index - 1).addClass('active'); // 当index自增到len,也就是超出图片的数量时，归零. if (index == len) { index = 0; } } // 定时器会循环触发函数autoPlay loop = setInterval(autoPlay, 4500); $('.control span').hover( function() { index = $(this).index(); autoPlay(); clearInterval(loop); // 清楚定时器，停止自动轮播 }, function() { loop = setInterval(autoPlay, 4500); // 启动定时器 }); }); </script> </head> <body> <p class="focus"> <p class="images"> <p class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_01.jpg" /></p> <p class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_02.jpg" /></p> <p class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_03.jpg" /></p> </p> <p class="title"> <p>不变的安全才是最可靠的安全。</p> <p>清新的绿色源自身边的绿色。</p> <p>服务于生活的科技才是最高端的科技。</p> </p> <p class="control"> <span>1</span> <span>2</span> <span>3</span> </p> </p> </body> </html>

全部回复(4)

巴扎黑2017-04-11 10:25:44 4楼

wow.js是当元素出现在视野里的时候开始执行动画的，banner是display：none；到display：block；状态切换的，所以可以用wow.js.

赞 +0

添加回复

怪我咯2017-04-11 10:25:44 3楼

纯手写了一个最简单的，当一张幻灯显示时，它对应的文字标题从左边伸出来，看看思路就明白了。

我这就只有一个动画效果：

    .title p.active {
        opacity: 1;
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }

你需要给文字加什么动画效果就看你自己CSS怎么写了

jsFiddle分享的网站不知道怎么显示不出图片。。我就直接贴代码了，复制拿去就能看了

阿神2017-04-11 10:25:44 2楼

可以不用插件，自己直接写一个

巴扎黑2017-04-11 10:25:44 1楼

推荐使用CSS3动画，在切换的时候改变class，把CSS动画写在相关的class上，这样实现最简单；当然如果需要兼容不支持CSS3动画的浏览器就得用JavaScript做了。