利用Swiper制作手机新闻界面

运行界面

在这里插入图片描述

知识点

做移动端开发需要适口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

freeMode：默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
freeModeSticky：使得freeMode也能自动贴合。与freeMode一般配合使用。
slidesPerView：设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字（可为小数，小数不可loop），或者 'auto’则自动根据slides的宽度来设定数量。
loop模式下如果设置为’auto’还需要设置另外一个参数loopedSlides。
slidesPerView: 'auto’目前还不支持多行模式（当slidesPerColumn > 1）

绑定分页器

var bannerSwiper = new Swiper('#banner',{
    autoplay:500,
    loop:true,
    pagination:{
        el:'#banner .pagination'
    }
})

text-indent 规定首行缩进
自动轮播设置autoplay中delay

去除移动端点击产生的高亮事件

/*去除移动端点击产生的高亮状态*/
-webkit-tap-highlight-color: transparent;

slideChangeTransitionStart()：回调函数，swiper从当前slide开始过渡到另一个slide时执行。
在这个方法中，activeIndex代表当前滑动的下标
jQuery中直接用index获取当前元素下标
eq获取当前兄弟元素中第几个

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
            /*去除移动端点击产生的高亮状态*/
            -webkit-tap-highlight-color: transparent;
        }

        html{
            font-size: 10px;
        }

        body{
            font-size: 1.4rem;
        }

        #header{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
            width: 100%;
            height: 4.4rem;
            overflow: hidden;
            background-color: #fdfdfd;
            color: #0b0d0f;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
        }

        .top-line{
            width: 100%;
            height: 0.3rem;
            line-height: 0;
            font-size: 0;
            overflow: hidden;
            background-color: skyblue;
            background: -webkit-linear-gradient(left,rgba(89,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
            background: -moz-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
            background: -ms-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
            background: linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
        }

        #header .swiper-slide{
            padding: 1rem 2rem;
            width: auto;
            height: 100%;
        }

        /*焦点图*/
        #banner{
            width: 100%;
            overflow: hidden;
            margin-top: 4.4rem;

            position: relative;
        }

        #banner .swiper-slide{
            position: relative;
        }

        #banner .swiper-slide img{
            max-width: 100%;
            display: block;
        }

        #banner .swiper-slide h2{
            text-align: center;
            font-size: 1.3rem;
            width: 100%;
            height: 4.4rem;
            line-height: 4.4rem;
            color: #fafafa;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            text-shadow: 1px 1px 1px #000;
            background-color:rgba(0,0,0,0);
            background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));
            background:-webkit-gradient(linear,top, from(rgba(0,0,0,0)),to(rgba(0,0,0,0.5)));
            background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));
            background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));
        }

        #banner .pagination{
            z-index: 30;
            position: absolute;
            left: 0;
            bottom: 0.3rem;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        #banner .pagination .swiper-pagination-bullet{
            display: inline-block;
            width: 0.7rem;
            height: 0.7rem;
            background-color: #fff;
        }

        #banner .pagination .swiper-pagination-bullet-active{
            background-color: #ff6600;
        }
        
        /*竖向新闻*/
        #announcement{
            height: 4rem;
            background: #f5f8fc;
            border: 1px solid skyblue;
            margin: 0.6em;
        }

        #announcement a{
            color: deepskyblue;
            text-decoration: none;
            display: block;
            line-height: 4rem;
            text-indent: 0.7rem;
            overflow: hidden;
        }

        /*选项卡*/
        #tab-container{
            height: 40rem;
        }

        .tabs{
            border-top: 2px solid deepskyblue;
            background: url("images/headbg.png") no-repeat left top #fafafa;
            -webkit-background-size: auto 100%;
            background-size: auto 100%;
            height: 4rem;
            overflow: hidden;
        }

        .tabs a{
            float: left;
            width: 8rem;
            height: 100%;
            line-height: 4rem;
            color: deepskyblue;
            text-decoration: none;
            text-align: center;
        }

        .tabs a:focus{
            background-color: transparent;
        }

        .tabs a.active{
            background: #fdfdfd;
            color: #e9232c;
        }

        .news-list{
            padding: 0 10px;
        }

        .news-list li{
            overflow: hidden;
            border-bottom: 1px solid #e0e0e0;
            box-shadow: 0 1px 1px #fff;
            line-height: 4rem;
            color: #666;
            font-size: 90%;
        }
    </style>
</head>
<body>
    <!--头部-->
    <section id="header">
        <!--线条-->
        <div class="top-line"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">Web</div>
            <div class="swiper-slide">Java</div>
            <div class="swiper-slide">Python</div>
            <div class="swiper-slide">大数据</div>
            <div class="swiper-slide">人工智能</div>
            <div class="swiper-slide">区块链</div>
            <div class="swiper-slide">UI/UE</div>
            <div class="swiper-slide">C/C++</div>
        </div>
    </section>
    <!--轮播图-->
    <section id="banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/one.png" alt="">
                <h2>撩课大前端—Vue项目实战—撩多多商城</h2>
            </div>
            <div class="swiper-slide">
                <img src="images/two.png" alt="">
                <h2>H5+C3从入门到贯通</h2>
            </div>
            <div class="swiper-slide">
                <img src="images/three.png" alt="">
                <h2>撩课-JavaScript基础+项目实战</h2>
            </div>
        </div>
        <div class="pagination">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
        </div>
    </section>
    <!--竖向滚动新闻-->
    <section id="announcement" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#">Web架构师养成系列(第二篇)-async</a>
            </div>
            <div class="swiper-slide">
                <a href="#">撩课-Web架构师养成系列第一篇</a>
            </div>
            <div class="swiper-slide">
                <a href="#">大前端-面试宝典-第三十二篇</a>
            </div>
        </div>
    </section>
    <!--选项卡头部-->
    <section class="tabs">
        <a href="#" class="active">Web</a>
        <a href="#">Java</a>
        <a href="#">Py</a>
    </section>
    <!--选项卡内容-->
    <section id="tab-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <ul class="news-list">
                    <li>撩课大前端—面试宝典—第一篇</li>
                    <li>撩课大前端—面试宝典—第二篇</li>
                    <li>撩课-每天刷Web面试题(前10天汇总)-第十七篇</li>
                    <li>撩课-Web架构师养成系列第一篇</li>
                    <li>撩课-Web架构师养成系列(第二篇)-async</li>
                    <li>撩课-Web架构师养成系列(第三篇)-构建工具</li>
                    <li>撩课-每天刷Web面试题(前10天汇总)-第十七篇</li>
                    <li>撩课-Web架构师养成系列第一篇</li>
                    <li>撩课-Web架构师养成系列(第二篇)-async</li>
                    <li>撩课-Web架构师养成系列(第三篇)-构建工具</li>
                </ul>
            </div>
            <div class="swiper-slide">
                <ul class="news-list">
                    <li>撩课大前端—面试宝典—第一篇</li>
                    <li>撩课大前端—面试宝典—第二篇</li>
                    <li>撩课-每天刷Web面试题(前10天汇总)-第十七篇</li>
                    <li>撩课-Web架构师养成系列第一篇</li>
                    <li>撩课-Web架构师养成系列(第二篇)-async</li>
                    <li>撩课-Web架构师养成系列(第三篇)-构建工具</li>
                    <li>撩课-每天刷Web面试题(前10天汇总)-第十七篇</li>
                    <li>撩课-Web架构师养成系列第一篇</li>
                    <li>撩课-Web架构师养成系列(第二篇)-async</li>
                    <li>撩课-Web架构师养成系列(第三篇)-构建工具</li>
                </ul>
            </div>
            <div class="swiper-slide">
                <ul class="news-list">
                    <li>撩课大前端—面试宝典—第一篇</li>
                    <li>撩课大前端—面试宝典—第二篇</li>
                    <li>撩课-每天刷Web面试题(前10天汇总)-第十七篇</li>
                    <li>撩课-Web架构师养成系列第一篇</li>
                    <li>撩课-Web架构师养成系列(第二篇)-async</li>
                    <li>撩课-Web架构师养成系列(第三篇)-构建工具</li>
                    <li>撩课-每天刷Web面试题(前10天汇总)-第十七篇</li>
                    <li>撩课-Web架构师养成系列第一篇</li>
                    <li>撩课-Web架构师养成系列(第二篇)-async</li>
                    <li>撩课-Web架构师养成系列(第三篇)-构建工具</li>
                </ul>
            </div>
        </div>
    </section>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/swiper.js"></script>
<script>
    $(function () {
       var navSwiper = new Swiper('#header', {
           freeMode : true,
           freeModeSticky : true,
           slidesPerView : 'auto'
       });

        var bannerSwiper = new Swiper('#banner', {
            autoplay: 1500,
            loop: true,
            pagination: {
                el: '#banner .pagination'
            }
        });

        var announcementSwiper = new Swiper('#announcement', {
            loop: true,
            direction: 'vertical',
            autoplay: {
                delay: 2000
            }
        });

        $('.tabs a').on('click', function (e) {
            e.preventDefault();

            $('.tabs .active').removeClass('active');
            $(this).addClass('active');
            tabsSwiper.slideTo($(this).index());
        });

        var tabsSwiper = new Swiper('#tab-container', {
            speed: 500,
            on: {
                slideChangeTransitionStart: function(){
                    $('.tabs .active').removeClass('active');
                    $('.tabs a').eq(this.activeIndex).addClass('active');
                }
            }
        });
    });
</script>
</body>
</html>

index.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    /*去除移动端点击产生的高亮状态*/
    -webkit-tap-highlight-color: transparent;
}

html{
    font-size: 10px;
}

body{
    font-size: 1.4rem;
}

#header{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 4.4rem;
    overflow: hidden;
    background-color: #fdfdfd;
    color: #0b0d0f;
    box-shadow: 3px 3px rgba(0,0,0,.2);
}

#header .top-line{
    width: 100%;
    height: 0.3rem;
    line-height: 0;
    font-size: 0;
    background: -webkit-linear-gradient(left,rgba(89,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
    background: -moz-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
    background: -ms-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
    background: linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);

}

#header .swiper-slide{
    padding: 1rem 2rem;
    width: auto;
    height: 100%;
}

#banner{
    width: 100%;
    overflow: hidden;
    margin-top: 4.4rem;
    position: relative;
}

#banner .swiper-slide{
    position: relative;
}

#banner .swiper-slide img{
    max-width: 100%;
    display: block;
}

#banner .swiper-slide h2{
    text-align: center;
    font-size: 1.3rem;
    width: 100%;
    height: 4.4rem;
    line-height: 4.4rem;
    color: #fafafa;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    text-shadow: 1px 1px 1px #000;
    background-color:rgba(0,0,0,0);
    background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));
    background:-webkit-gradient(linear,top, from(rgba(0,0,0,0)),to(rgba(0,0,0,0.5)));
    background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));
    background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));

}

#banner .pagination{
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0.3rem;
}

#banner .pagination .swiper-pagination-bullet{
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    background-color: #fff;
}

#banner .pagination .swiper-pagination-bullet-active{
    background-color: #ff6600;
}

#announcement{
    height: 4rem;
    background-color: #f5f8fc;
    border: 1px solid skyblue;
    margin: 0.6rem;
}

#announcement a{
    color:deepskyblue;
    text-decoration: none;
    display: block;
    line-height: 4rem;
    text-indent: 0.5rem;
    overflow: hidden;
}

.tabs{
    border-top: 2px solid deepskyblue;
    background: url("../images/headbg.png") no-repeat left top #fafafa;
    background-size: auto 100%;
    height: 4rem;
    overflow: hidden;
}

.tabs a{
    width: 8rem;
    height: 100%;
    line-height: 4rem;
    float: left;
    color:deepskyblue;
    text-decoration: none;
    text-align: center;

}

.tabs a.active{
    background-color: #fdfdfd;
    color: #e9232c;
}

.news-list{
    padding: 0 1rem;
}

#tab-container{
    height: 40rem;
}

.news-list li{
    overflow: hidden;
    border-bottom: 0.1rem solid #e0e0e0;
    box-shadow: 0 1px 1px #fff;
    line-height: 3.5rem;
    color: #666;
    font-size: 90%;
}

index.js

$(function () {
    var navSwiper = new Swiper('#header',{
        freeMode:true,
        freeModeSticky:true,
        slidesPerView:'auto'
    });

    var bannerSwiper = new Swiper('#banner',{
        loop:true,
        pagination:{
            el:'#banner .pagination'
        },
        autoplay: {
            delay:2000
        }
    });

    var announcementSwiper = new Swiper('#announcement',{
        loop:true,
        direction:'vertical',
        autoplay: {
            delay:1500
        }
    })

    var tabsSwiper = new Swiper('#tab-container',{
        speed:500,
        on:{
            slideChangeTransitionStart: function(){
                $('.tabs .active').removeClass('active');
                $('.tabs a').eq(this.activeIndex).addClass('active');
            },
        }
    });

    $('.tabs a').on('click',function (e) {
        e.preventDefault();
        $('.tabs .active').removeClass('active');
        $(this).addClass('active');
        tabsSwiper.slideTo($(this).index());
    });
});

KaiSarH

发布了284 篇原创文章 · 获赞 126 · 访问量 1万+

私信关注

利用Swiper制作手机新闻界面

运行界面

知识点

代码

index.html

index.css

index.js

猜你喜欢