如何让轮播图上的文字有动画效果？

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

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

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

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

javascript html 前端

阅读 10.1k

4 个回答

得票最新

cloud_Guo

696

发布于
2016-12-11

✓ 已被采纳

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

已注销

3.6k83856

发布于
2016-12-11

更新于
2016-12-11

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

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

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

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

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

<!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>
    <div class="focus">
        <div class="images">
            <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_01.jpg" /></div>
            <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_02.jpg" /></div>
            <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_03.jpg" /></div>
        </div>
        <div class="title">
            <p>不变的安全才是最可靠的安全。</p>
            <p>清新的绿色源自身边的绿色。</p>
            <p>服务于生活的科技才是最高端的科技。</p>
        </div>
        <div class="control">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </div>
</body>

</html>