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滑动插件成品，敬请关注。