jQuery和hwSlider實現內容響應式可觸控滑動切換效果附源碼下載（二）

更新時間：2016年06月22日 15:33:15 作者：月光

這篇文章主要介紹了jQuery和hwSlider實現內容響應式可觸控滑動切換效果附源碼下載（二）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

今天我們繼續(xù)內容滑動切換效果的第二部分講解。如今我們的web開發(fā)都要適應移動設備，就是說我們的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: 手指放到屏幕上時觸發(fā)
touchmove: 手指在屏幕上滑動式觸發(fā)
touchend: 手指離開屏幕時觸發(fā)
touchcancel: 系統(tǒng)取消touch事件的時候觸發(fā)，這個好像比較少用

好，現在我們需要在滑塊上綁定偵聽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滑動插件成品，敬請關注。

您可能感興趣的文章: