<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper中文网基础演示(www.swiper.com.cn)title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.10.1.min.js">script>
<script src="js/swiper.min.js">script>
<style>
* {
margin: 0;
padding: 0;
}
#header {
position: absolute;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 43px;
overflow: hidden;
background: #fdfdfc;
font: 12px/40px hiragino sans gb, microsoft yahei, simsun;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#top-line {
width: 100%;
height: 3px;
line-height: 0;
font-size: 0;
overflow: hidden;
text-align: center;
z-index: 1;
background-color: #0fa6ea;
background: -webkit-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: -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: 0 20px;
width: auto;
}
#banner {
width: 100%;
overflow: hidden;
margin-top: 43px;
position: relative;
}
#banner .swiper-slide {
position: relative;
text-align: center;
}
#banner img {
max-width: 100%;
display: block;
}
#banner h2 {
text-align: center;
font-size: 1em;
height: 42px;
line-height: 42px;
color: #fafafa;
position: absolute;
left: 0;
bottom: 0;
right: 0;
font-weight: normal;
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.7));
background: -webkit-gradient(linear, top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
}
#banner .pagination {
position: absolute;
z-index: 20;
bottom: 3px;
text-align: center;
right: 0;
}
#banner .swiper-pagination-bullet {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 5px;
background: #fff;
margin: 0 2px;
opacity: 0.8;
cursor: pointer;
}
#banner .swiper-pagination-bullet-active {
background: #ff6600;
}
#announcement {
height: 2em;
background: #f5f8fc;
border: 1px solid #d2e1f1;
margin: 0.5em;
}
#announcement a {
color: #294c7f;
text-decoration: none;
display: block;
line-height: 2;
height: 2em;
text-indent: 0.5em;
overflow: hidden;
}
#tabs-container {
height: 400px;
}
.tabs {
border-top: 2px solid #9ac7ed;
background: url(images/headbg.png) no-repeat left top #f9fafa;
background-size: auto 100%;
width: 100%;
height: 38px;
overflow: hidden;
}
.tabs a {
font-weight: normal;
text-align: center;
float: left;
width: 64px;
height: 38px;
line-height: 38px;
color: #2a70be;
text-decoration: none;
}
.tabs a.active {
border-top: 2px solid #2a70be;
margin-top: -2px;
background-image: url(images/tab_ui.png);
background-repeat: no-repeat;
-webkit-background-size: 64px 39px;
-moz-background-size: 64px 39px;
-o-background-size: 64px 39px;
background-size: 64px 39px;
background-position: left top;
color: #c14545;
}
.news-list {
padding: 0 10px;
}
.news-list li {
overflow: hidden;
border-bottom: 1px solid #eceef0;
box-shadow: 0 1px 1px #fff;
font-weight: normal;
height: 35px;
line-height: 35px;
font-size: 80%;
}
style>
head>
<body>
<div id="header">
<div id="top-line">div>
<div class="swiper-wrapper">
<div class="swiper-slide">新闻div>
<div class="swiper-slide">财经div>
<div class="swiper-slide">娱乐div>
<div class="swiper-slide">体育div>
<div class="swiper-slide">订阅div>
<div class="swiper-slide">微博div>
<div class="swiper-slide">空间div>
<div class="swiper-slide">书城div>div>
div>
<div id="banner" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/0.jpg?v=sf" />
<h2>贾乃亮发长文默认李小璐出轨h2>div>
<div class="swiper-slide">
<img src="images/1.jpg?v=wf" />
<h2>阿里程序员穿特步相亲被拒绝h2>div>
div>
<div class="pagination">div>
div>
<div id="announcement" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">女博士相亲角被嘲？其实是有“预谋”的行为艺术a>div>
<div class="swiper-slide">
<a href="#">你为什么还没过上你想要的生活a>div>
<div class="swiper-slide">
<a href="#">莲花粉橙色也太美了！连直男都爱的仙女色！a>div>
div>
div>
<div class="tabs">
<a href="#" class="active">新闻a>
<a href="#">社会a>
<a href="#">娱乐a>
div>
<div id="tabs-container" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul class="news-list">
<li>女子强行阻拦高铁发车 称其丈夫没上车li>
<li>小马奔腾创始人妻子被判赔2亿债务li>
<li>杭州女子将200平荒地改造成“秘密花园”li>
<li>“紫光阁饭店”事件，乌龙背后是热搜的生意li>
<li>最美乘务员冒雪挨个扶旅客下火车li>
<li>五月天周杰伦再度合体li>
<li>张馨予被赞模特身材li>
<li>惊呆，杨紫的脸现在跟脖子一样宽了！li>
<li>睡姿暴露你偷情指数li>
<li>济南小伙儿自掏腰包，为陌生农民工加菜li>
ul>
div>
<div class="swiper-slide">
<ul class="news-list">
<li>女子街边卖早餐卖蓝色油条生意火爆li>
<li>保定励志哥！坐着轮椅唱歌成网红li>
<li>电影院保安恋上女研究生li>
<li>19岁女生保送北大直博li>
<li>男子越狱期间强奸女友12岁的女儿li>
<li>8旬爷爷因三个孩子都不赡养li>
<li>7座面包车塞进20名学生li>
<li>老人做家务时羽绒服突然“爆炸”li>
<li>直播间里，用歌舞抗癌的70岁“网红”li>
<li>PG_ONE粉丝买热搜"紫光阁地沟油"li>
ul>
div>
<div class="swiper-slide">
<ul class="news-list">
<li>“绿帽门”后贾乃亮深夜买醉li>
<li>姚笛大方挥手无名指戒指抢眼li>
<li>汪小菲被大S减肥成果吓到li>
<li>Baby和秀智同穿18万仙女裙li>
<li>易烊千玺得罪粉丝？接机时粉丝不想理他li>
<li>Tara成员：送了跑车还有90亿li>
<li>蒋欣在节目上的表情超有戏li>
<li>李小璐最新写真曝光，大走稳重的知性风li>
<li>马思纯和欧豪穿同款秀恩爱li>
<li>第90届奥斯卡颁奖礼发海报li>
ul>
div>
div>
div>
<script type="text/javascript">
window.onload = function () {
var navSwiper = new Swiper('#header', {
freeMode: true,
slidesPerView: 'auto',
freeModeSticky: true,
});
var bannerSwiper = new Swiper('#banner', {
autoplay: 5000,
visibilityFullFit: true,
loop: true,
pagination: {
el: '#banner .pagination',
}
});
var announcementSwiper = new Swiper('#announcement', {
direction: 'vertical',
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
}
})
var tabsSwiper = new Swiper('#tabs-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())
})
}
script>
body>
html>
