手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件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的更多相关文章
- jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
- TouchSlide 触屏滑动特效插件
TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...
- TouchSlide触屏滑动特效插件的使用
官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 移动端全屏滑动的小插件,简单,轻便,好用,只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
- HTML5学习总结-09 拖放和手机触屏事件
一 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 ht ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- touch移动触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
随机推荐
- 数据库选型之亿级数据量并发访问(MySQL集群)
刘 勇 Email:lyssym@sina.com 简介 针对实际应用中并发访问MySQL的场景,本文采用多线程对MySQL进行并发读取访问,其中以返回用户所需的数据并显示在终端为测试结束节点,即将 ...
- C# 编码命名规则
C# 编码命名规则 各种类型命名规范总结 类型 命名规则 注意事项 实例 类或结构 Pascal 首字符大写 HttpContext 接口 Pascal 加前缀I IDataAdaper 枚举名 Pa ...
- Augular初探
一年多前,巧遇angular,觉得是个非常优秀的mv*框架,当时项目使用了MooTools.因此也没继续研究.刚好最近,同事组中有用到ng,并且要做个分享.因此就将from Why Does Angu ...
- Android 数据加密算法 Des,Base64详解
一,DES加密: 首先网上搜索了一个DES加密算法工具类: import java.security.*;import javax.crypto.*; public class DesHelper { ...
- android动画具体解释一 概述
动画和图形概述 Android 提供了大量的强大的API以应用于UI动画和绘制2D和3D图形.以下各节向你描写叙述了这些API的预览和系统能力以帮助你决定怎么才是达到你需求的最佳方法. 动画 Andr ...
- [转]OrCAD PSpice DIODE model parameter
1.从OrCAD PSpice help文档: 2.国外网站的相关介绍: The DC characteristics of the diode are determined by the param ...
- python标准库介绍——8 operator 模块详解
==operator 模块== ``operator`` 模块为 Python 提供了一个 "功能性" 的标准操作符接口. 当使用 ``map`` 以及 ``filter`` 一类 ...
- Spring依赖注入的Setter注入(通过get和set方法注入)
Spring依赖注入的Setter注入(通过get和set方法注入) 导入必要的jar包(Spring.jar和commonslogging.jar) 在src目录下建立applicationCont ...
- MYSQL加入远程用户或同意远程訪问三种方法
加入远程用户admin密码为password GRANT ALL PRIVILEGES ON *.* TO admin@localhost IDENTIFIED BY \'password\' WIT ...
- 批处理学习笔记3 - 变量声明和goto代替while循环
批处理中没有while循环,只能用goto代替.下面是代码 @echo off set /a i = 0 :again echo %i% set /a i= %i% + 1 if %i% lss 10 ...