<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Swiper test</title>
<link rel="stylesheet" href="swiper.min.css">
<style>
* {
margin: 0;
padding: 0;
}
.blue-slide {
background: #3566f2;
}
.red-slide {
background: #CA4040;
}
.orange-slide {
background: #ffa800;
}
.swiper-container {
height: 600px;
position: relative;
}
.swiper-slide .index1 {
position: absolute;
width: 50%;
height: 70%;
left: 25%;
top: 15%;
}
.swiper-slide .index2 {
/*border: 1px solid black;*/
position: absolute;
width: 50%;
height: 70%;
left: 25%;
top: 15%;
text-align: center;
}
.swiper-slide .logo {
color: white;
font-size: 120px;
font-style: italic;
text-align: center;
font-weight: bold;
}
.swiper-slide .show {
color: white;
font-size: 30px;
text-align: center;
position: relative;
top: 10%;
}
.swiper-slide .button-div {
text-align: center;
position: relative;
top: 20%;
}
.swiper-slide .button {
border: 1px solid white;
border-radius: 25px;
display: inline;
padding: 10px 15px;
color: white;
cursor: pointer;
margin-right: 5px;
}
.swiper-slide .button-div2 {
text-align: center;
position: relative;
top: 30%;
}
.swiper-slide .button-start {
/*border: 1px solid #3566f2;*/
border-radius: 25px;
background-color: #fff;
color: #3566f2;
cursor: pointer;
position: relative;
display: inline;
padding: 10px 15px;
}
.swiper-slide .whychoose {
color: #fff;
position: relative;
top: 40px;
font-size: 50px;
}
.swiper-slide .feature-wrapper {
position: relative;
top: 80px;
}
.swiper-slide .feature {
color: #fff;
position: relative;
font-size: 25px;
margin-top: 20px;
text-shadow: 1px 1px 1px gray;
}
</style>
<script src="swiper.min.js"></script>
<script>
window.onload = function() {
var mySwiper1 = new Swiper('#swiper-container1',{
autoplay: 0, //自动滑动的间隔时间
loop: true, //是否以环状来循环播放
speed:1000,
grabCursor: true, //鼠标放在slide上时变为小手
pagination: '.swiper-pagination',
paginationClickable: true,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
parallax: true,
});
};
</script>
</head>
<body>
<div class="swiper-container" id="swiper-container1">
<!-- <div class="bg-parallax" style="background-image:url(bg.jpg)" data-swiper-parallax="-23%"></div> -->
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
<div class="index1">
<div class="logo" data-swiper-parallax="0">Swiper</div>
<div class="show" data-swiper-parallax="-1000">开源、免费、强大的移动端触摸滑动插件</div>
<div class="button-div" data-swiper-parallax="-2000">
<div class="button">查看Swiper演示</div>
<div class="button">查看API文档</div>
<div class="button">交流、分享Swiper</div>
<div class="button">回顾Swiper2</div>
</div>
<div class="button-div2" data-swiper-parallax="-3000">
<div class="button-start">开始使用Swiper</div>
</div>
</div>
</div>
<div class="swiper-slide orange-slide">
<div class="index2">
<div class="whychoose">为什么选择Swiper ?</div>
<div class="feature-wrapper">
<div class="feature" data-swiper-parallax="-1000">★ 免费 , 开源 , 稳定 , 应用广泛 ★</div>
<div class="feature" data-swiper-parallax="-2000">★ 可单独使用无需jQuery , 亦可结合jQuery ★</div>
<div class="feature" data-swiper-parallax="-3000">★ 简单配置即可实现手机、平板网站大部分触摸功能 ★</div>
<div class="feature" data-swiper-parallax="-4000">★ 包括焦点图 , tab , 触摸滑动导航等 ★</div>
<div class="feature" data-swiper-parallax="-5000">★ 文档丰富 , 大量活跃用户解答疑问 ★</div>
</div>
</div>
</div>
</div>
<!-- pagination -->
<div class="swiper-pagination swiper-pagination-black"></div>
<!-- navigator -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
</html>
Swiper的Demo
4星 · 超过85%的资源 需积分: 41 197 浏览量
2015-07-14
13:43:14
上传
评论
收藏 18KB 7Z 举报 
Swiper的Demo.7z （3个子文件） 
Swiper的Demo 
swiper.min.js 63KB
swiper_index.html 6KB swiper.min.css 14KB资源评论
GTZN-S2018-07-25非常实用，不过看官方文档也一样可行，谢谢。
zhrey_csdn2018-05-02很实用很实用很实用
嚣张的胖头鱼2019-10-31swiper其实还是不错的
