今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  <div style="max-width: 640px; margin: 0 auto;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="data:images/zhiling1.jpg"></div>
<div class="swiper-slide">
<img src="data:images/zhiling2.jpg"></div>
<div class="swiper-slide">
<img src="data:images/zhiling3.jpg"></div>
<div class="swiper-slide">
<img src="data:images/zhiling4.jpg"></div>
<div class="swiper-slide">
<img src="data:images/zhiling5.jpg"></div>
<div class="swiper-slide">
<img src="data:images/zhiling6.jpg"></div>
<div class="swiper-slide">
<img src="data:images/zhiling7.jpg"></div>
</div>
</div>
</div>

js代码:

function fixPagesHeight() {

    $('.swiper-slide,.swiper-container').css({

        height: $(window).height(),

    })

}

$(window).on('resize', function() {

    fixPagesHeight();

})

fixPagesHeight();

var mySwiper = new Swiper('.swiper-container', {

    direction: 'vertical',

    mousewheelControl: true,

    watchSlidesProgress: true,

    onInit: function(swiper) {

        swiper.myactive = 0;

    },

    onProgress: function(swiper) {

        for (var i = 0; i < swiper.slides.length; i++) {

            var slide = swiper.slides[i];

            var progress = slide.progress;

            var translate, boxShadow;

            translate = progress * swiper.height * 0.8;

            scale = 1 - Math.min(Math.abs(progress * 0.2), 1);

            boxShadowOpacity = 0;

            slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')';

            if (i == swiper.myactive) {

                es = slide.style;

                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';

                es.zIndex=0;

            }else{

                es = slide.style;

                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform ='';

                es.zIndex=1;

            }

        }

    },

    onTransitionEnd: function(swiper, speed) {

        for (var i = 0; i < swiper.slides.length; i++) {

        //    es = swiper.slides[i].style;

        //    es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = '';

        //    swiper.slides[i].style.zIndex = Math.abs(swiper.slides[i].progress);

        }

        swiper.myactive = swiper.activeIndex;

    },

    onSetTransition: function(swiper, speed) {

        for (var i = 0; i < swiper.slides.length; i++) {

            //if (i == swiper.myactive) {

                es = swiper.slides[i].style;

                es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

            //}

        }

    }

});

via:http://www.w2bc.com/Article/33095

手机触屏滑动图片切换插件swiper.js的更多相关文章

  1. jquery手机触屏滑动拼音字母城市选择器代码

    今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...

  2. TouchSlide 触屏滑动特效插件

    TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...

  3. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  4. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  5. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

  7. HTML5学习总结-09 拖放和手机触屏事件

    一 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 ht ...

  8. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  9. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. 数据库选型之亿级数据量并发访问(MySQL集群)

    刘 勇  Email:lyssym@sina.com 简介 针对实际应用中并发访问MySQL的场景,本文采用多线程对MySQL进行并发读取访问,其中以返回用户所需的数据并显示在终端为测试结束节点,即将 ...

  2. C# 编码命名规则

    C# 编码命名规则 各种类型命名规范总结 类型 命名规则 注意事项 实例 类或结构 Pascal 首字符大写 HttpContext 接口 Pascal 加前缀I IDataAdaper 枚举名 Pa ...

  3. Augular初探

    一年多前,巧遇angular,觉得是个非常优秀的mv*框架,当时项目使用了MooTools.因此也没继续研究.刚好最近,同事组中有用到ng,并且要做个分享.因此就将from Why Does Angu ...

  4. Android 数据加密算法 Des,Base64详解

    一,DES加密: 首先网上搜索了一个DES加密算法工具类: import java.security.*;import javax.crypto.*; public class DesHelper { ...

  5. android动画具体解释一 概述

    动画和图形概述 Android 提供了大量的强大的API以应用于UI动画和绘制2D和3D图形.以下各节向你描写叙述了这些API的预览和系统能力以帮助你决定怎么才是达到你需求的最佳方法. 动画 Andr ...

  6. [转]OrCAD PSpice DIODE model parameter

    1.从OrCAD PSpice help文档: 2.国外网站的相关介绍: The DC characteristics of the diode are determined by the param ...

  7. python标准库介绍——8 operator 模块详解

    ==operator 模块== ``operator`` 模块为 Python 提供了一个 "功能性" 的标准操作符接口. 当使用 ``map`` 以及 ``filter`` 一类 ...

  8. Spring依赖注入的Setter注入(通过get和set方法注入)

    Spring依赖注入的Setter注入(通过get和set方法注入) 导入必要的jar包(Spring.jar和commonslogging.jar) 在src目录下建立applicationCont ...

  9. MYSQL加入远程用户或同意远程訪问三种方法

    加入远程用户admin密码为password GRANT ALL PRIVILEGES ON *.* TO admin@localhost IDENTIFIED BY \'password\' WIT ...

  10. 批处理学习笔记3 - 变量声明和goto代替while循环

    批处理中没有while循环,只能用goto代替.下面是代码 @echo off set /a i = 0 :again echo %i% set /a i= %i% + 1 if %i% lss 10 ...