今天我们继续内容滑动切换效果的第二部分讲解。如今我们的web开发都要适应移动设备，就是说我们的web页面要在移动设备如手机端也能正常访问，所以我将第一部分的基本切换效果做了加强，增加了响应式和触控滑动效果。
本文是hwSlider-内容滑动切换效果的第二部分，演示DEMO都是基于第一部分内容的基础上的，所以，如果您还没阅读过第一部分的话，请先移步参阅：内容左右滑动切换效果附源码下载（一）
响应式
什么是响应式设计，这里我就不描述了。在hwSlider中，我们通过CSS来设置滑块的宽度和高度，设置了百分比的宽度。
接下来，我们在js部分开始部分定义变量，在初始化resize()函数中，我们计算并定位导航圆点和导航箭头的位置，并且在浏览器窗口大小调整的时候也调用resize()。
显示第一个滑块
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()实现滑动切换。
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滑动插件成品，敬请关注。
原文链接：https://www.f2er.com/jquery/47637.html
