hwSlider-content スライド切り替え効果 (2): 応答性の高いタッチ スライド

今日は引き続き、コンテンツのスライド切り替えエフェクトの後半を説明します。現在、Web 開発はモバイル デバイスに対応する必要があります。つまり、Web ページは携帯電話などのモバイル デバイスでもアクセスできる必要があります。そのため、最初の部分の基本的なスイッチング効果を強化し、応答性とタッチ スライド効果を追加しました。


デモのダウンロードソースコードを見る

この記事は、hwSlider-contentのスライド切り替えエフェクトの後編です。デモDEMOは前編の内容に基づいていますので、前編を読んでいない場合は、こちらをご覧ください。はじめにお読みください ご参照ください: hwSlider-content スライド切り替え効果 (1)

レスポンシブ

レスポンシブデザインとは何か、ここでは説明しません。 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();
	});

});

モバイルタッチスクリーンスライディング

モバイルデバイスでは、画面をタップし、ジェスチャースライディングを使用してスライダーを切り替えることができます。この効果を実現するには、コア タッチ イベントを使用する必要があります。タッチ イベントを処理すると、画面上でスライドする各指を追跡できます。

以下は 4 つのタッチ イベントです:

touchstart: 指が画面上に置かれるとトリガーされます

touchmove: 指が画面上でスライドするとトリガーされます

touchend: 指が画面から離れるとトリガーされます

touchcancel: ときシステムはタッチ イベント トリガーをキャンセルします。これはあまり使用されないようです

さて、スライダーのタッチ イベントをバインドしてリッスンし、タッチスタートとタッチエンドでそれぞれ画面スライダー上の指の位置を取得する必要があります。変位に基づいて左スライドかどうかを判断するか、右にスワイプしてから 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 コンテンツのスライド切り替え効果 (2): 応答性の高いタッチスライド コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

関連記事:

HTML5のスライディングエリア選択要素を理解するための例 Slider要素

hwSliderコンテンツのスライド切り替え効果(1)

WeChatアプレットの詳細な紹介スライダーコンポーネント