完整项目下载
运行界面
知识点
- 做移动端开发需要适口
<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());
});
});
