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

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

效果展示源码下载
本文是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滑动插件成品，敬请关注。