手机触屏滑动图片切换插件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://***/Article/33095
手机触屏滑动图片切换插件swiper.js相关推荐
- 手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效
特效描述:html5 手机触屏 滑动图片 下一张查看特效.html5图片下一张查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Hungry cat 6 Whatever Hung ...
- c语言触屏滑动图片,jQuery手机触屏滑动的响应式图片轮播效果
插件描述:jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码. 响应式触摸滑块 Javascript/css3 滑块 HTML This is a title This ...
- 自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
- c语言触屏滑动图片,微信小程序左右滑动切换图片酷炫效果(附效果)(示例代码)...
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 2 ...
- jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
- spotlight全屏弹窗图片幻灯片插件
spotlight全屏弹窗图片幻灯片插件 spotlight.js图片画廊插件,点击图片出现弹出层全屏幻灯片展示.并且可以左右切换,支持放大缩小,自动轮播,关闭暂停等功能. 演示地址 下载地址
- 网页前端代码存档 - 【第三期】全屏banner图片切换特效详解
十一长假plus已经结束 ,上班的第一周,大家都是什么心情呢,是不是还没有从放假的状态转换过来呢,需要调整一段时间 记得放假的时候,不知不觉就过去4天,当时感叹,哇靠,一下子就过去一半了啊,只能安慰 ...
- jQuery手机触屏左右滑动切换栏目和焦点图
实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){TouchSlide({slideC ...
- 手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端 叠加图片 触屏滑动查看特效.html5手机叠加图片手指滑动查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
最新文章
- python判断列表list中的内容、数值是否全部都大于某一个阈值(threshold)、如果数值都大于某一个阈值(threshold)则跳出循环
- 线程池传递对象参数_一次线程池参数错误引起的线上故障
- Java 调用http接口(基于OkHttp的Http工具类方法示例)
- Dockerfiles基础语法
- java在所选路径中找到分号,classpath
- 区块链行业级应用服务商识数信科获千万元天使轮融资...
- 在代理类中引用动态代理
- android4.0.3 修改启动动画和开机声音
- error: statement with no effect [-Werror=unused-value]
- 科大讯飞语音合成python版
- python 狄里克雷平滑_狄里克雷平滑(Dirichlet)、線性插值平滑(Linear Interpolated)、拉普拉斯平滑(Laplacian)...
- 串口通信协议之SPI通信协议
- C# 调用讯飞实时语音转写
- 视频伪原创消重 抖音视频md5修改在线
- [备忘] 下载youtube表单的工具
- pon终端测试仪_6304-PON终端测试仪报价_测试仪-北京海富达科技有限公司
- netty_channal学习
- testerhome学习笔记2_Bash基础
- SSM整合APP项目
- 物联网技术概论:第7章
热门文章
- CentOS下安装NetBeans集成开发环境
- Memcached深度分析
- 如何获取主机的IP址址
- RapidJSON简介及使用
- OpenCV中图像旋转(warpAffine)算法的实现过程
- vs2008 ActiveX控件测试容器的生成以及调试ActiveX控件
- 【Live555】live555源码详解(七):GenericMediaServer、RTSPServer、RTSPClient
- php显示服务器文件,php-无法显示从新服务器下载文件的进度(在以前的服务器上工作)...
- python解压_python解压缩
- SpringBoot复习:3(@Conditional)