hwSlider中怎么實(shí)現(xiàn)內(nèi)容滑動(dòng)切換效果

今天就跟大家聊聊有關(guān)hwSlider中怎么實(shí)現(xiàn)內(nèi)容滑動(dòng)切換效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

響應(yīng)式

什么是響應(yīng)式設(shè)計(jì)，這里我就不描述了。在hwSlider中，我們通過(guò)CSS來(lái)設(shè)置滑塊的寬度和高度，設(shè)置了百分比的寬度。

#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}

接下來(lái)，我們?cè)趈s部分開(kāi)始部分定義變量，在初始化resize()函數(shù)中，我們計(jì)算并定位導(dǎo)航圓點(diǎn)和導(dǎo)航箭頭的位置，并且在瀏覽器窗口大小調(diào)整的時(shí)候也調(diào)用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;  //滑塊的總個(gè)數(shù) var sliderWidth = 600; //滑塊初始寬度 var sliderHeight = 320; //滑塊初始高度 var index = 1; //初始顯示第一個(gè)滑塊 var speed = 400; //滑動(dòng)速度 var interval = 3000; //間隔時(shí)間 var dotShow = true; //是否顯示可切換的導(dǎo)航圓點(diǎn) var autoPlay = false; //是否支持自動(dòng)滑動(dòng) var clickable = true; //是否已經(jīng)點(diǎn)擊了滑塊在做滑動(dòng)動(dòng)畫(huà) //初始化組件 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'); //導(dǎo)航圓點(diǎn)位置 var arrOffset = (sHeight-40)/2; $(".arr").css('top',arrOffset+'px'); //導(dǎo)航箭頭位置 } resize(); $(window).resize(function(){  resize(); }); });

移動(dòng)端觸屏滑動(dòng)

在移動(dòng)設(shè)備上，我們可以輕觸屏幕，并使用手勢(shì)滑動(dòng)來(lái)切換滑塊。要實(shí)現(xiàn)這種效果，需要用到核心的touch事件。處理touch事件能跟蹤到屏幕滑動(dòng)的每根手指。

以下是四種touch事件：

touchstart: 手指放到屏幕上時(shí)觸發(fā)

touchmove: 手指在屏幕上滑動(dòng)式觸發(fā)

touchend: 手指離開(kāi)屏幕時(shí)觸發(fā)

touchcancel: 系統(tǒng)取消touch事件的時(shí)候觸發(fā)，這個(gè)好像比較少用

好，現(xiàn)在我們需要在滑塊上綁定偵聽(tīng)touch觸控事件，在touchstart和touchend時(shí)分別獲取手指在屏幕滑塊上的位置，然后根據(jù)位移判斷是左滑還是右滑，然后調(diào)用moveTo()實(shí)現(xiàn)滑動(dòng)切換。

var mouseX = 0, touchStartY = 0, touchStartX = 0; hwsliderLi.on({ //觸控開(kāi)始 'touchstart': function(e) { touchStartY = e.originalEvent.touches[0].clientY; touchStartX = e.originalEvent.touches[0].clientX; }, //觸控結(jié)束 '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; }, //觸控移動(dòng) 'touchmove': function(e) { if(e.preventDefault) { e.preventDefault(); } } });

看完上述內(nèi)容，你們對(duì)hwSlider中怎么實(shí)現(xiàn)內(nèi)容滑動(dòng)切換效果有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。