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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6.     <title>Swiper</title>
  7.     <link rel="stylesheet" href="./css/swiper.css">
  8.     <style type="text/css">
  9.         body {
  10.             font-family: arial,helvetica;
  11.             color: #F2F2F2;
  12.         }
  13.  
  14.         h1, h2, h3, h4, h5, h6 {
  15.             font-weight: normal;
  16.             font-size: 100%;
  17.             margin: 0;
  18.             padding: 0;
  19.         }
  20.  
  21.         h1{
  22.             font-size: 6rem;
  23.         }
  24.  
  25.         .swiper-container {
  26.             width: 100%;
  27.             height: 500px;
  28.             text-align: center;
  29.         }
  30.  
  31.         #slide1{
  32.             background: #BFDA00;
  33.         }
  34.  
  35.         #slide1 h1{
  36.             color:#444;
  37.         }
  38.  
  39.         #slide2{
  40.             background: #2C3E50;
  41.         }
  42.  
  43.         #slide2 h1{
  44.             color:#fff;
  45.         }
  46.  
  47.         #slide3{
  48.             background: #AC4F2C;
  49.         }
  50.  
  51.         #slide3 h1{
  52.             color:#fff;
  53.         }
  54.  
  55.         .swiper-wrapper{
  56.             /*linear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
  57.             ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  58.             ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  59.             ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  60.             ease-in-out:规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  61.             cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/
  62.  
  63.             /*transition-timing-function: ease;
  64.             transition-timing-function: ease-in;
  65.             transition-timing-function: ease-out;
  66.             transition-timing-function: ease-in-out;
  67.             transition-timing-function: linear;
  68.             transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  69.             transition-timing-function: step-start;
  70.             transition-timing-function: step-end;
  71.             transition-timing-function: steps(4, end);
  72.             transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);*/
  73.         }
  74.     </style>
  75. </head>
  76. <body>
  77.     <div class="swiper-container">
  78.         <div class="swiper-wrapper">
  79.             <div class="swiper-slide" id="slide1">
  80.                 <h1>Swiper.js</h1>
  81.             </div>
  82.             <div class="swiper-slide" id="slide2">
  83.                 <h1>is a wonderful</h1>
  84.             </div>
  85.             <div class="swiper-slide" id="slide3">
  86.                 <h1>Plugin</h1>
  87.             </div>
  88.         </div>
  89.         <!-- 如果需要分页器 -->
  90.         <div class="swiper-pagination"></div>
  91.  
  92.         <!-- 如果需要导航按钮 -->
  93.         <div class="swiper-button-prev"></div>
  94.         <div class="swiper-button-next"></div>
  95.  
  96.         <!-- 如果需要滚动条 -->
  97.         <!--<div class="swiper-scrollbar"></div>-->
  98.     </div>
  99.  
  100.     <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
  101.     <script type="text/javascript" src="./js/swiper/swiper.jquery.min.js"></script>
  102.     <!--<script type="text/javascript" src="./js/swiper/swiper.animate1.0.2.min.js"></script>-->
  103.     <script type="text/javascript">
  104.         var mySwiper = new Swiper ('.swiper-container', {
  105.             direction: 'horizontal',
  106.             loop: true,
  107.  
  108.             // 如果需要分页器
  109.             pagination: '.swiper-pagination',
  110.  
  111.             // 如果需要前进后退按钮
  112.             nextButton: '.swiper-button-next',
  113.             prevButton: '.swiper-button-prev',
  114.  
  115.             // 如果需要滚动条
  116.             //scrollbar: '.swiper-scrollbar'
  117.  
  118.             autoplay: 3000,
  119.             //speed: 2000,
  120.  
  121.             grabCursor: true,
  122.  
  123.             roundLengths : true,
  124.  
  125.             freeMode: true,
  126.             //freeModeMomentum: false,
  127.             //freeModeMomentumRatio : 5,
  128.  
  129.             //effect:"cube",
  130.             effect:"coverflow"
  131.         });
  132.     </script>
  133. </body>
  134. </html>

这个是parallax的demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6.     <title>swiper_parallax</title>
  7.     <link rel="stylesheet" href="./css/swiper.css">
  8.     <style type="text/css">
  9.         body {
  10.             font-family: arial,helvetica;
  11.             color: #F2F2F2;
  12.         }
  13.  
  14.         h1, h2, h3, h4, h5, h6 {
  15.             font-weight: normal;
  16.             font-size: 100%;
  17.             margin: 0;
  18.             padding: 0;
  19.         }
  20.  
  21.         h1{
  22.             font-size: 6rem;
  23.             color:#fff;
  24.         }
  25.  
  26.         .swiper-container {
  27.             width: 100%;
  28.             height: 500px;
  29.             text-align: center;
  30.         }
  31.  
  32.         .swiper-wrapper{
  33.             position: absolute;
  34.             top:0;
  35.             left:0;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="swiper-container">
  41.         <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>
  42.         <div class="swiper-wrapper">
  43.             <div class="swiper-slide">
  44.                 <div data-swiper-parallax="-100">
  45.                     <h1>Hello</h1>
  46.                 </div>
  47.             </div>
  48.             <div class="swiper-slide">
  49.                 <div data-swiper-parallax="-100">
  50.                     <h1>World</h1>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.     </div>
  55.  
  56.     <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
  57.     <script type="text/javascript" src="./js/swiper/swiper.jquery.min.js"></script>
  58.     <!--<script type="text/javascript" src="./js/swiper/swiper.animate1.0.2.min.js"></script>-->
  59.     <script type="text/javascript">
  60.         var mySwiper = new Swiper('.swiper-container',{
  61.             parallax : true
  62.         });
  63.     </script>
  64. </body>
  65. </html>

API

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

经典幻灯片插件Swiper的更多相关文章

  1. Owl Carousel幻灯片插件的使用

    Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...

  2. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

  4. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  5. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  6. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  7. ResponsiveSlides.js最轻量级的幻灯片插件

    摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支 ...

  8. JQuery之滑动幻灯片插件Easy Slider初体验

    Easy Slider 是一个滑动幻灯片插件,支持任何图片或内容,可以实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.基本上只需要引入这个插件后,设置好内容,然后样式化C ...

  9. jq 幻灯片插件制作

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. SpringMVC运行原理浅析

    SpringMVC是主流的J2EEWEB层框架,SpringMVC是Sping家族中一个重要的产品.下面给出SpringMVC的运行原理.springmvc和spring无需通过中间层进行整合,spr ...

  2. Centos7 虚拟机复制后网卡问题 Job for network.service failed

    在运行“/etc/init.d/network restart”命令时,出现错误“Job for network.service failed. See 'systemctl status netwo ...

  3. 13种细分类型的TCP重传小结(一张表总结4.4内核所有TCP重传场景)

    具体每种重传类型的wireshark示例解说参考前文 来自为知笔记(Wiz)

  4. TCP系列55—拥塞控制—18、其他拥塞控制算法及相关内容概述

    前面我们演示分析了100+个wireshark TCP实例,拥塞控制部分也介绍常见的拥塞处理场景以及4种拥塞撤销机制,但是我们一直使用的都是reno拥塞控制算法.实际上拥塞控制发展到今天已经有了各种各 ...

  5. Nginx服务器搭建

    http://blog.csdn.net/molingduzun123/article/details/51850925 http://tengine.taobao.org/book/index.ht ...

  6. 小学四则运算练习（JAVA编写）

    源码在Github的仓库主页链接地址:https://github.com/rucr9/rucr 看到这个题目,大概很多人会发出“切,这也太简单了吧!有必要小题大做?”的感叹!是的,仅仅作为一道数学运 ...

  7. Python入门：学会创建并调用函数

    这是关于Python的第4篇文章,主要介绍下如何创建并调用函数. print():是打印放入对象的函数 len():是返回对象长度的函数 input():是让用户输入对象的函数 ... 简单来说,函数 ...

  8. 命令行方式操作O365

    这几天公司为O365启用了双因子认证,期间出了些小问题,导致我无法使用管理员账号登入控制台,但是Powershell的方法依旧可以.所以我觉得还是有必要把图形化操作改成脚本操作,以备不时之需.以后凡是 ...

  9. 微信小程序 功能函数 点击传参和页面

    // 商品详情页跳转函数 detailInto: function (e) { // console.log() var change = e.currentTarget.dataset.id; wx ...

  10. 虚拟机centos 安装 redis 环境 linux 使用 java 远程连接 redis

    redis官网地址:http://www.redis.io/ 最新版本:2.8.3 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载源码,解压缩后编译源码. $ wget ...