照着写的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; 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