您的位置：首页 > 其它

使用Swiper框架模仿Swiper中文官网的效果Demo

2015-07-14 10:00 483 查看
核心代码如下：

<!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>


动态效果请自行下载文件用浏览器查看，所有文件已打包，下载地址如下：

点击打开链接
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航