jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)


Posted in Javascript onJune 22, 2016

今天我们继续内容滑动切换效果的第二部分讲解。如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所以我将第一部分的基本切换效果做了加强,增加了响应式和触控滑动效果。

jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)

效果展示     源码下载

本文是hwSlider-内容滑动切换效果的第二部分,演示DEMO都是基于第一部分内容的基础上的,所以,如果您还没阅读过第一部分的话,请先移步参阅:基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)

响应式

什么是响应式设计,这里我就不描述了。在hwSlider中,我们通过CSS来设置滑块的宽度和高度,设置了百分比的宽度。

#hwslider{width: 100%;height:auto;min-height: 120px;margin:40px auto; position: relative; overflow: hidden;} 
#hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1} 
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden;} 
#hwslider ul li.active{display: block;} 
#hwslider ul li img{max-width: 100%} 
#dots{position: absolute; bottom:20px; left:200px; min-width:60px; height: 12px; z-index: 2;} 
#dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;} 
#dots span.active{background:orangered} 
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none} 
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;} 
#hwslider:hover .arr{display: block; text-decoration: none;color: #fff} 
#prev{left: 20px} 
#next{right: 20px}

接下来,我们在js部分开始部分定义变量,在初始化resize()函数中,我们计算并定位导航圆点和导航箭头的位置,并且在浏览器窗口大小调整的时候也调用resize()。

$(function(){ 
var slider = $("#hwslider"); 
var dots = $("#dots span"), 
prev = $("#prev"),next = $("#next"); 
var sliderInder = slider.children('ul') 
var hwsliderLi = sliderInder.children('li'); 
var hwsliderSize = hwsliderLi.length; //滑块的总个数 
var sliderWidth = 600; //滑块初始宽度 
var sliderHeight = 320; //滑块初始高度 
var index = 1; //初始显示第一个滑块 
var speed = 400; //滑动速度 
var interval = 3000; //间隔时间 
var dotShow = true; //是否显示可切换的导航圆点 
var autoPlay = false; //是否支持自动滑动 
var clickable = true; //是否已经点击了滑块在做滑动动画 
//初始化组件 
var resize = function(){ 
var sWidth = slider.width(); 
var dotWidth = hwsliderSize*20; 
var dotOffset = (sWidth-dotWidth)/2; 
var sHeight = sliderHeight/sliderWidth*sWidth; 
slider.css('height',sHeight); 
$("#dots").css('left',dotOffset+'px'); //导航圆点位置 
var arrOffset = (sHeight-40)/2; 
$(".arr").css('top',arrOffset+'px'); //导航箭头位置 
} 
resize(); 
$(window).resize(function(){ 
resize(); 
}); 
});

移动端触屏滑动

在移动设备上,我们可以轻触屏幕,并使用手势滑动来切换滑块。要实现这种效果,需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件:

touchstart: 手指放到屏幕上时触发
touchmove: 手指在屏幕上滑动式触发
touchend: 手指离开屏幕时触发
touchcancel: 系统取消touch事件的时候触发,这个好像比较少用

好,现在我们需要在滑块上绑定侦听touch触控事件,在touchstart和touchend时分别获取手指在屏幕滑块上的位置,然后根据位移判断是左滑还是右滑,然后调用moveTo()实现滑动切换。

var mouseX = 0, 
touchStartY = 0, 
touchStartX = 0; 
hwsliderLi.on({ 
//触控开始 
'touchstart': function(e) { 
touchStartY = e.originalEvent.touches[0].clientY; 
touchStartX = e.originalEvent.touches[0].clientX; 
}, 
//触控结束 
'touchend': function(e) { 
var touchEndY = e.originalEvent.changedTouches[0].clientY, 
touchEndX = e.originalEvent.changedTouches[0].clientX, 
yDiff = touchStartY - touchEndY, 
xDiff = touchStartX - touchEndX; 
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { 
if ( xDiff > 5 ) { 
if(index >= hwsliderSize){ 
index = 1; 
}else{ 
index += 1; 
} 
moveTo(index,'next'); 
} else { 
if(index == 1){ 
index = hwsliderSize; 
}else{ 
index -= 1; 
} 
moveTo(index,'prev'); 
} 
} 
touchStartY = null; 
touchStartX = null; 
}, 
//触控移动 
'touchmove': function(e) { 
if(e.preventDefault) { e.preventDefault(); } 
} 
});

再加上上一篇文章中的基本滑块js代码就能实现一个响应式的可触控滑动的内容滑动效果。

如果要在PC上实现拖动滑动的话,需要绑定滑块的onmousedown,onmousemove以及onmouseup事件,实现鼠标按住拖动滑块实现滑动切换,主要代码这里就不贴出来了,大家可以下载源代码中查看。

接下来的第三部分,我将给大家讲解如何将现有的hwSlider代码封装成一个jQuery滑动插件成品,敬请关注。

Javascript 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
React组件生命周期详解
Jul 03 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 #Javascript
浅析jQuery Ajax通用js封装
Jun 22 #Javascript
Javascript如何判断数据类型和数组类型
Jun 22 #Javascript
最全的Javascript编码规范(推荐)
Jun 22 #Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 #Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 #Javascript
jQuery soColorPacker 网页拾色器
Jun 22 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
jquery密码强度校验
2015/12/02 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
Angular排序实例详解
2017/06/28 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
Python中Random和Math模块学习笔记
2015/05/18 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
10个顶级Python实用库推荐
2021/03/04 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014年平安夜寄语
2014/12/08 职场文书
同学毕业留言寄语
2015/02/27 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL