hwSlider-content Gleitschalteffekt (1)

Das Wechseln von Inhalten durch Schieben ist weit verbreitet. Zu den häufigsten gehören Folienfokusbild, Galeriewechsel usw. Mit der weit verbreiteten Anwendung der WEB-Front-End-Technologie nimmt der Content-Slide-Switching-Effekt eine wichtige Position auf Webseiten ein. Daher hat Helloweba auf dieser Website speziell ein leicht verständliches Entwicklungs-Tutorial für den Content-Slide-Switching-Effekt für Front-End-Seiten zusammengestellt. End-Enthusiasten.



Demo-Download-Quellcode anzeigen


Dieses Tutorial ist in drei Teile unterteilt: 1. Verwenden Sie jQuery, um einen grundlegenden Gleitschalteffekt für Inhalte zu entwickeln, 2 Unterstützt den Touch-adaptiven Wechseleffekt für Inhalte. 3. Kapselt das jQuery-Plug-in für den Wechseleffekt für Inhalte. In diesem Artikel wird der erste Teil erläutert. Die nächsten beiden Teile werden in den folgenden Artikeln veröffentlicht. Bleiben Sie also auf dem Laufenden.

In diesem Artikel werden Beispiele kombiniert, um die grundlegenden Effekte des gleitenden Wechselns von Inhalten zu erzielen, einschließlich:

Umschalten mit dem linken und rechten Pfeil

Unendliches nahtloses Scrollen

Punkt Tastenumschaltung

Animationseffekt

Automatische Umschaltung

HTML

Bereiten Sie zunächst die HTML-Struktur vor und umschließen Sie den gesamten Schiebebereich mit #hwslider, einschließlich des Slider-Inhalts, verwendet der Slider ul li, um den Inhalt zu organisieren. Der Slider-Inhalt kann ein beliebiger HTML-Inhalt wie Bilder und Text sein. #dots ist die Punktwechselnavigation, die aus mehreren kleinen Punkten besteht, die der Anzahl der Schieberegler entsprechen und sich im Allgemeinen unterhalb des Schiebebereichs befinden. .arr besteht aus zwei linken und rechten Richtungstasten.

[code=html]
<p id="hwslider">
	<ul>
		<li class="active"><a href="#"><img src="images/s1.jpg" alt="1"></a></li>
		<li><a href="#"><img src="images/s2.jpg" alt="2"></a></li>
		<li>Helloweba</li>
	</ul>
	<p id="dots">
		<span data-index="1" class="active"></span>
		<span data-index="2"></span>
		<span data-index="3"></span>
	</p>
	<a href="javascript:;" id="prev" class="arr"><</a>
	<a href="javascript:;" id="next" class="arr">></a>
</p>

CSS

Verwenden Sie CSS, um das Layout jeder Komponente des Schiebebereichs zu vervollständigen. Beachten Sie, dass #hwslider die Position: relativ, Breite und Höhe festlegen muss slider #hwslider ul li Position festlegen:absolut Standardmäßig wird nur der .aktive Schieberegler angezeigt und der Teil, der die Größe überschreitet, wird ausgeblendet. Sowohl die Punktnavigation #dots als auch die Pfeilnavigation .arr müssen die Position „absolut“ festlegen. Die Pfeilnavigation wird standardmäßig nicht angezeigt und wird nur angezeigt, wenn die Maus über den Schiebereglerbereich gleitet. Beachten Sie außerdem, dass der Z-Index von #dots und .arr auf 2 gesetzt ist, d. h. beide sollten auf dem Schieberegler angezeigt werden. Sie können den CSS-Stil ändern, um ihn an verschiedene Anforderungen anzupassen. Bitte sehen Sie sich den folgenden Code an:

[code=css]
#hwslider{width: 600px;height: 320px;margin:40px auto; position: relative; overflow: hidden;}
#hwslider ul{width: 600px; height: 320px; position: absolute; z-index: 1}
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 600px;height: 320px; overflow: hidden;}
#hwslider ul li.active{display: block;}
#dots{position: absolute; bottom:20px; left:270px; 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}

jQuery

Wir verwenden jQuery, um verschiedene Effekte des gleitenden Umschaltens zu erzielen. Zunächst stellen wir die von Baidu CDN bereitgestellte jQuery-Bibliothek und hwslider.js vor.

[code=html]
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/hwslider.js"></script>

Dann definieren wir variable Parameter in hwslider.js vor:

[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 index = 1; //初始显示第一个滑块
	var speed = 400; //滑动速度
	var interval = 3000; //间隔时间
	var autoPlay = false; //是否支持自动滑动
	var clickable = true; //是否已经点击了滑块在做滑动动画

});

Das Obige definiert verschiedene Erforderliche Variablen, darunter klickbar, werden verwendet, um den Klick der Slider-Animation zu begrenzen, da der Schiebevorgang des Sliders einige Zeit in Anspruch nimmt. Wenn der Pfeil unter normalen Umständen kontinuierlich angeklickt wird und der Klick nicht eingeschränkt ist, wird die nächste Slider-Animation ausgeführt Fortsetzung bevor die Animation abgeschlossen ist, kann dazu führen, dass die Seite hängen bleibt.
Als nächstes schreiben wir die Bewegungsanimationsfunktion moveTo(). Akzeptiert zwei Parameter: index ist der Zielschieberegler, der verschoben werden soll, dir ist die Schieberichtung, einschließlich next und prev. Das Prinzip, das wir zur Implementierung der Schiebeanimation verwenden, besteht darin, dass die Entfernung, um die sich der aktuelle Schieberegler nach links oder rechts bewegt, genau der Breite des Schiebereglers entspricht. Wir betrachten diese Breite als den sichtbaren Bereich. Beim Schieben bewegt sich der aktuelle Schieberegler nach links oder rechts des sichtbaren Bereichs, und der nächste Schieberegler gelangt von links oder von rechts in das Ansichtsfenster. Wir verwenden die animate()-Methode von jQuery, um Animationseffekte zu erzielen. Die Bewegungsgeschwindigkeit der beiden Schieberegler bleibt konstant und erzielt einen nahtlosen Scrolleffekt. Wenn das Gleiten abgeschlossen ist, wird außerdem der Punktschaltstil mit der Zeit geändert.

[code=js]
	var moveTo = function(index,dir){ 
		if(clickable){
			clickable = false;

			//位移距离
			var offset = slider.width();
			if(dir == 'prev'){
				offset = -1*offset;
			}

			//当前滑块动画
			sliderInder.children('.active').stop().animate({
				left: -offset},
				speed,
				 function() {
				 	$(this).removeClass('active');
			});
			//下一个滑块动画
			hwsliderLi.eq(index-1).css('left', offset + 'px').addClass('active').stop().animate({
				left: 0}, 
				speed,
				function(){
					clickable = true;
			});

			dots.removeClass('active');
			dots.eq(index-1).addClass('active');

		}else{
			return false;
		}
	}

Binden Sie das Klickereignis des linken und rechten Pfeils. Wenn Sie auf den Pfeil klicken, bestimmen Sie, ob der aktuelle Schieberegler der erste oder der letzte Schieberegler ist, und definieren Sie den Index neu, um eine drahtlose Verbindung herzustellen Scrolleffekt und rufen Sie dann jeweils die Funktion moveTo() auf, um den Gleitanimationseffekt zu erzielen.

[code=js]
	next.on('click', function(event) {
		event.preventDefault();
		if(clickable){
			if(index >= hwsliderSize){
				index = 1;
			}else{
				index += 1;
			}
			moveTo(index,'next');
		}
	});

	prev.on('click', function(event) {
		event.preventDefault();
		if(clickable){
			if(index == 1){
				index = hwsliderSize;
			}else{
				index -= 1;
			}

			moveTo(index,'prev');
		}
		
	});

Als nächstes binden Sie das Klickereignis der Punktnavigation. Wenn auf den kleinen Punkt geklickt wird, wird die aktuell angeklickte Punktseriennummer abgerufen, d. h. welcher Punkt angeklickt wird, was entspricht Die ersten paar Schieberegler und dann moveTo() aufrufen, um die Umschaltanimation abzuschließen.

[code=js]
	dots.on('click',  function(event) {
		event.preventDefault();
		
		if(clickable){
			var dotIndex = $(this).data('index');
			if(dotIndex > index){
				dir = 'next';
			}else{
				dir = 'prev';
			}
			if(dotIndex != index){
				index = dotIndex;
				moveTo(index, dir);
			}
		}
	});

Automatische Umschaltung, zuerst müssen wir einen Timer definieren, setInterval führt play() jedes Mal aus, play() ändert den Indexparameter bei jeder Ausführung, Aufruf moveTo implementiert den Umschalteffekt. Wenn schließlich die Maus den Schieberegler nach oben bewegt, wird der Timer gelöscht, und wenn sich die Maus vom Schieberegler wegbewegt, wird der Timer automatisch wieder umgeschaltet.

[code=js]
	if(autoPlay){
		var timer;
		var play = function(){
			index++;
			if(index > hwsliderSize){
				index = 1;
			}
			moveTo(index, 'next');
		}
		timer = setInterval(play, interval); //设置定时器

		//鼠标滑上时暂停
		slider.hover(function() {
			timer = clearInterval(timer);
		}, function() {
			timer = setInterval(play, interval);
		});
	};

Nachdem Sie den Code sortiert haben, können Sie schließlich einen grundlegenden Gleitschalteffekt sehen und können auch den Quellcode zum Testen herunterladen.

Das Obige ist der Inhalt des hwSlider-Content-Schiebeeffekts (1). 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-Inhalts-Schiebeschalteffekt (2): reaktionsfähiges Touch-Schieben

Detaillierte Einführung der WeChat-Applet-Schiebereglerkomponente