今天我們繼續內容滑動切換效果的第二部分講解。如今我們的web開發都要適應行動設備,就是說我們的web頁面要在行動裝置如手機端也能正常訪問,所以我將第一部分的基本切換效果做了加強,增加了響應式和觸控滑動效果。
檢視示範下載原始碼
本文是hwSlider-內容滑動切換效果的第二部分,示範DEMO都是基於第一部分內容的基礎上的,所以,如果您還沒閱讀過第一部分的話,請先移步參閱:hwSlider-內容滑動切換效果(一)
什麼是響應式設計,這裡我就不描述了。在hwSlider中,我們透過CSS來設定滑桿的寬度和高度,設定了百分比的寬度。
[code=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()。
[code=js] $(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()實現滑動切換。
[code=css] 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-內容滑動切換效果(二):響應式觸控滑動 的內容,更多相關內容請關注PHP中文網(www.php.cn)!
相關文章: