前端练习（一）- 仿泰豪官网

仿照泰豪网站首页，几乎一模一样，采用轮播图框架和封装好的动画js文件

轮播图的使用

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

1.首先引入文件

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/swiper.min.js"></script>

2.初始化轮播图

  //初始化轮播图
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        });

动画文件的使用

1.引入相关文件   

<link rel="stylesheet" href="css/animate.css" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

2.使用方法

直接在div上加入data-animate属性。属性值为动画效果

<div class="box1">
        <div class="main-center">
            <div class="box1-1" data-animate="fadeInLeft">
                <h1>智能电力</h1>
                <p>
                    以能源互联网技术的研究与应用为基础，围绕能源互联网、电力信息化、智能应急电源产品的研制与服务，已成为国家电网、南方电网电力调度信息化业务主流供应商，并积极围绕国家“一带一路”战略，拓展国际电力工程总包业务。</p>
                <a href="">了解更多</a>
            </div>
        </div>
    </div>
    <div class="box2">
        <div class="main-center">
            <div class="box2-1" data-animate="fadeInRight">
                <h1>军工装备</h1>
                <p>以军工信息技术的研究与应用为基础，从事电站及机电一体化、光电探测、导航和雷达等产品的研制与服务，产品装备于各军兵种及公安武警系统，并积极践行“军民融合”，打造成为国内领先的创新型国防供应商。</p>
                <a href="">了解更多</a>
            </div>
        </div>
    </div>
    <div class="box3">
        <div class="main-center">
            <div class="box3-1" data-animate="fadeInLeft">
                <h1>创意科技</h1>
                <p>基于移动终端客户的需求，重点从事动画、漫画、游戏、音乐为主的数字内容产品创作和推广，以及VR（虚拟现实）、AI（人工智能）技术开发与应用。</p>
                <a href="">了解更多</a>
            </div>
        </div>
    </div>
    <div class="box4">
        <div class="main-center">
            <div class="box4-1" data-animate="fadeInRight">
                <h1>智慧城市</h1>
                <p>依托与科研院所开展深入研发合作，打造成为智慧城市顶层设计、解决方案、系统集成和运营维护为一体的投资运营商，并采用PPP等投融资模式开展智慧城市投资服务。</p>
                <a href="">了解更多</a>
            </div>
        </div>
    </div>
    <div class="box5">
        <div class="main-center">
            <div class="box5-1" data-animate="fadeInLeft">
                <h1>创业投资</h1>
                <p>
                    泰豪创投主营基金管理和股权投资，基金管理主要是以市场化运作方式对外募集设立私募股权投资基金并运营管理；股权投资主要是针对行业发展前景广阔、成长性较高的非上市类企业进行股权投资，目前投资企业近100家，涵盖了企业早期、成长期、成熟期、Pre-IPO期，主要专注于智能电力、军工装备、智慧城市和创意科技四大板块的投资。</p>
                <a href="">了解更多</a>
            </div>
        </div>
    </div>