hwSlider-content-Gleitschalteffekt (2): reaktionsschnelles Touch-Gleiten

Heute erklären wir weiterhin den zweiten Teil des Content-Sliding-Switching-Effekts. Heutzutage muss sich unsere Webentwicklung an mobile Geräte anpassen, was bedeutet, dass unsere Webseiten auch auf mobilen Geräten wie Mobiltelefonen zugänglich sein müssen. Daher habe ich den grundlegenden Umschalteffekt des ersten Teils verbessert und die Reaktionsfähigkeit und den Touch-Slide-Effekt hinzugefügt.


Demo-Download-Quellcode ansehen

Dieser Artikel ist der zweite Teil des hwSlider-Content-Slide-Switching-Effekts. Die Demo-DEMO basiert auf dem Inhalt des ersten Teils , also, Wenn Sie den ersten Teil nicht gelesen haben, lesen Sie bitte: hwSlider-content-Schiebeschalteffekt (1)

Responsive

Was ist Responsive Design, hier I I Ich werde es nicht beschreiben. In hwSlider legen wir die Breite und Höhe des Schiebereglers über CSS fest und legen die Breite in Prozent fest.

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

Als nächstes definieren wir Variablen am Anfang des js-Teils. In der Initialisierungsfunktion resize() berechnen und positionieren wir die Positionen der Navigationspunkte und Navigationspfeile Bei der Größenänderung wird auch die Funktion „browser window resize()“ aufgerufen.

[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();
	});

});

Mobiles Touchscreen-Schieben

Auf Mobilgeräten können wir auf den Bildschirm tippen und die Gesten-Schiebebewegung verwenden, um den Schieberegler zu wechseln. Um diesen Effekt zu erzielen, muss das Core-Touch-Ereignis verwendet werden. Durch die Verarbeitung von Berührungsereignissen kann jeder Finger verfolgt werden, der über den Bildschirm gleitet.

Das Folgende sind vier Berührungsereignisse:

Touchstart: wird ausgelöst, wenn der Finger auf dem Bildschirm platziert wird

Touchmove: wird ausgelöst, wenn der Finger über den Bildschirm gleitet

touchend: Wird ausgelöst, wenn der Finger den Bildschirm verlässt

touchcancel: Wird ausgelöst, wenn das System das Berührungsereignis abbricht. Dies scheint weniger verwendet zu werden

Okay, jetzt müssen wir binden und abhören Berühren Sie Ereignisse auf dem Schieberegler, ermitteln Sie die Position des Fingers auf dem Bildschirmschieberegler bei Touchstart bzw. Touchend und bestimmen Sie dann basierend auf der Verschiebung, ob nach links oder rechts gerutscht werden soll, und rufen Sie dann moveTo() auf, um den Schiebewechsel zu implementieren.

[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(); }

		}
	});

In Verbindung mit dem grundlegenden Slider-JS-Code im vorherigen Artikel kann ein reaktionsfähiger Touch-Sliding-Inhaltsgleiteffekt erzielt werden.
Wenn Sie Ziehen und Schieben auf dem PC implementieren möchten, müssen Sie die Ereignisse onmousedown, onmousemove und onmouseup des Schiebereglers binden, um das Schieben durch Gedrückthalten der Maus und Ziehen des Schiebereglers zu realisieren. Der Hauptcode wird hier nicht veröffentlicht . Sie können den Quellcode herunterladen, um ihn anzuzeigen.

Das Obige ist der Inhalt des hwSlider-Content-Slide-Switching-Effekts (2): Responsive Touch-Slide-Inhalt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). !

Verwandte Artikel:

Beispiele helfen Ihnen, das HTML5-Schiebebereichsauswahlelement Slider-Element zu verstehen

hwSlider-Content-Schiebeschalteffekt (1)

Detaillierte Einführung der WeChat-Applet-Slider-Komponente