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 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
基于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
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python中模块的__all__属性详解
2017/10/26 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python登录注册验证功能实现
2018/06/18 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
一年级语文教学反思
2014/02/13 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
学校师德师风整改方案
2014/10/28 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书