您的位置：首页 > 其它

经典幻灯片插件Swiper

2016-04-24 10:40 127 查看

照着写的demo，搞清楚什么叫分页器Pagination，什么叫nav，搞清楚DOM结构，container，wrapper之类的，就能写了。效果掉渣天！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Swiper</title>
<link rel="stylesheet" href="./css/swiper.css">
<style type="text/css">
body {
font-family: arial,helvetica;
color: #F2F2F2;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
}

h1{
font-size: 6rem;
}

.swiper-container {
width: 100%;
height: 500px;
text-align: center;
}

#slide1{
background: #BFDA00;
}

#slide1 h1{
color:#444;
}

#slide2{
background: #2C3E50;
}

#slide2 h1{
color:#fff;
}

#slide3{
background: #AC4F2C;
}

#slide3 h1{
color:#fff;
}

.swiper-wrapper{
/*linear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out:规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/

/*transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: step-start;
transition-timing-function: step-end;
transition-timing-function: steps(4, end);
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);*/
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="slide1">
<h1>Swiper.js</h1>
</div>
<div class="swiper-slide" id="slide2">
<h1>is a wonderful</h1>
</div>
<div class="swiper-slide" id="slide3">
<h1>Plugin</h1>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>

<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div>

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/swiper/swiper.jquery.min.js"></script>
<!--<script type="text/javascript" src="./js/swiper/swiper.animate1.0.2.min.js"></script>-->
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,

// 如果需要分页器
pagination: '.swiper-pagination',

// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

// 如果需要滚动条
//scrollbar: '.swiper-scrollbar'

autoplay: 3000,
//speed: 2000,

grabCursor: true,

roundLengths : true,

freeMode: true,
//freeModeMomentum: false,
//freeModeMomentumRatio : 5,

//effect:"cube",
effect:"coverflow"
});
</script>
</body>
</html>

这个是parallax的demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>swiper_parallax</title>
<link rel="stylesheet" href="./css/swiper.css">
<style type="text/css">
body {
font-family: arial,helvetica;
color: #F2F2F2;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
}

h1{
font-size: 6rem;
color:#fff;
}

.swiper-container {
width: 100%;
height: 500px;
text-align: center;
}

.swiper-wrapper{
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="swiper-container">
<div style="background-image:url(./img/Parallax.jpg); background-size: 100% 500px; width:150%; height:500px; top:0; left:0;" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div data-swiper-parallax="-100">
<h1>Hello</h1>
</div>
</div>
<div class="swiper-slide">
<div data-swiper-parallax="-100">
<h1>World</h1>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/swiper/swiper.jquery.min.js"></script>
<!--<script type="text/javascript" src="./js/swiper/swiper.animate1.0.2.min.js"></script>-->
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
parallax : true
});
</script>
</body>
</html>

API
http://www.swiper.com.cn/api/index.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航