找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发flexslider.js移动端轮播

2018-10-19 分类：JavaScript 阅读(830) 评论(0)

前端开发应会技能 前端开发，必备的ＰＳ技能 web前端开发技能点

html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>flexslider.js移动端轮播</title>
    <meta content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″ name=”viewport”>
    <style>
        /* reset wap */
        body,
        p,
        a,
        div,
        ol,
        ul,
        li,
        dl,
        dd,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        input,
        iframe,
        nav,
        header,
        footer {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            font: 16px Microsoft YaHei, sans-serif;
            -webkit-tap-highlight-color: transparent;
            color: #2a2b2c;
            background: #fff;
        }
        *,
        *::before,
        *::after {
            outline: none;
            box-sizing: border-box;
        }
        a,
        img {
            text-decoration: none;
            display: block;
            color: #2a2b2c;
            border: 0;
        }
        .wrapper {
            width: 360px;
            margin: 100px auto;
        }
        .h1s {
            margin: 40px 10px 10px 10px;
            font: 20px Microsoft YaHei;
        }
        /* flexslider */
        .flexslider {
            height: 180px;
            position: relative;
            background: #f5f5f5;
            overflow: hidden;
        }
        .flex-viewport {
            height: 100%;
        }
        .slides {
            height: 100%;
            position: relative;
            z-index: 1;
        }
        .slides li {
            height: 100%;
        }
        .slides li a {
            display: block;
            height: 100%;
            position: relative;
        }
        .flexslider li img {
            display: block;
            width: 100%;
            height: 100%;
            display: none;
        }
        .flex-control-nav {
            text-align: center;
            padding: 0 5px;
            position: absolute;
            right: 0;
            bottom: 3px;
            z-index: 2;
        }
        .flex-control-nav li {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin: 0 3px;
        }
        .flex-control-nav a {
            display: block;
            height: 100%;
            line-height: 40px;
            overflow: hidden;
            border: 1px solid #fff;
            border-radius: 55%;
        }
        .flex-control-nav .flex-active {
            background: #fff;
        }
        .flexslider .ps1 {
            width: 100%;
            height: 25px;
            color: #fff;
            background: rgba(0, 0, 0, .5);
            padding: 0 50px 0 10px;
            font: 14px/27px Microsoft YaHei;
            text-align: left;
            display: block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”flexslider”>
            <ul class=”slides”>
                <li>
                    <a href=””>
                        <img src=”http://ww2.sinaimg.cn/large/bea70753gw1f6fg9db318j21hc0m8n61.jpg” alt=””>
                        <p class=”ps1″>图片标题
                    </a>
                </li>
                <li>
                    <a href=””>
                        <img src=”http://ww4.sinaimg.cn/large/bea70753gw1f6fg9e38eyj21hc0m8tht.jpg” alt=””>
                        <p class=”ps1″>图片标题
                    </a>
                </li>
                <li>
                    <a href=””>
                        <img src=”http://ww4.sinaimg.cn/large/bea70753gw1f6fg9enyp1j21hc0m8465.jpg” alt=””>
                        <p class=”ps1″>图片标题
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
    <script src=”http://cdn.bootcss.com/flexslider/2.6.2/jquery.flexslider.min.js”></script>
    <script>
        $(function () {
            $(‘.flexslider’).flexslider({
                directionNav: false, //是否显示左右控制按钮
                controlNav: true, //是否显示底部切换按钮
                pauseOnAction: false, //手动切换后是否继续自动轮播,继续(false),停止(true),默认true
                animation: ‘slide’, //淡入淡出(fade)或滑动(slide),默认fade
                slideshowSpeed: 5000, //自动轮播间隔时间(毫秒),默认5000ms
                animationSpeed: 150, //轮播效果切换时间,默认600ms
                direction: ‘horizontal’, //设置滑动方向:左右horizontal或者上下vertical,需设置animation: “slide”,默认horizontal
                randomize: false, //是否随机幻切换
                animationLoop: true //是否循环滚动
            });
            setTimeout($(‘.flexslider img’).fadeIn());
        });
    </script>
</body>
</html>
web前端开发职业技能
前端开发技能瀑布流
前端开发总监 行业技能
赞(0)
前端开发者 » 前端开发flexslider.js移动端轮播
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论