Effet de commutation coulissante du contenu hwSlider (1)

La commutation coulissante de contenu est largement utilisée, les plus courantes incluent l'image de mise au point coulissante, la commutation de galerie, etc. Avec l'application généralisée de la technologie frontale WEB, l'effet de commutation coulissante de contenu occupe une place importante dans les pages Web. Par conséquent, Helloweba sur ce site a spécialement organisé un didacticiel de développement facile à comprendre pour l'effet de commutation coulissante de contenu pour le front-end. finissent les passionnés.



Afficher le code source de téléchargement de la démo


Ce didacticiel est divisé en trois parties : 1. Utilisez jQuery pour développer un effet de commutation coulissante de contenu de base, 2 Prend en charge l'effet de commutation coulissante de contenu adaptatif au toucher mobile. 3. Encapsule le plug-in jQuery pour l'effet de commutation coulissante de contenu. Cet article explique la première partie, et les deux parties suivantes seront publiées dans des articles ultérieurs, alors restez à l'écoute.

Cet article combinera des exemples pour obtenir les effets de base de la commutation coulissante de contenu, notamment :

Commutation des flèches gauche et droite

Défilement infini et transparent

Dot commutation de bouton

Effet d'animation

Commutation automatique

HTML

Préparez d'abord la structure HTML et enveloppez toute la zone coulissante avec #hwslider, y compris le contenu du curseur, le curseur utilise ul li pour organiser le contenu. Le contenu du curseur peut être n'importe quel contenu HTML tel que des images, du texte, etc. #dots est la navigation à commutation de points, composée de plusieurs petits points, correspondant au nombre de curseurs, et est généralement située sous la zone de glissement. .arr est composé de deux touches de direction gauche et droite.

[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

Utilisez CSS pour compléter la disposition de chaque composant de la zone coulissante Notez que #hwslider doit définir la position : relative, largeur et hauteur, puis la. slider #hwslider ul li Définir la position : absolue Par défaut, seul le curseur .active sera affiché et la partie qui dépasse la taille sera masquée. La navigation par points #dots et la navigation par flèche .arr doivent définir la position : absolue. La navigation par flèche n'est pas affichée par défaut et ne s'affiche que lorsque la souris glisse vers la zone du curseur. Une autre chose à noter est que le z-index de #dots et .arr est défini sur 2, c'est-à-dire qu'ils doivent tous deux être affichés sur le curseur. Vous pouvez modifier le style CSS pour répondre à divers besoins, veuillez consulter le code suivant :

[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

Nous utilisons jQuery pour obtenir divers effets de commutation coulissante, Tout d'abord, nous présentons la bibliothèque jQuery et hwslider.js fournis par Baidu CDN.

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

Ensuite, nous prédéfinissons les paramètres variables dans hwslider.js :

[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; //是否已经点击了滑块在做滑动动画

});

Ce qui précède définit divers éléments requis variables, parmi lesquelles clickable est utilisé pour limiter le clic de l'animation du curseur, car le processus de glissement du curseur prend du temps. Si la flèche est cliquée en continu, dans des circonstances normales, si le clic n'est pas restreint, l'animation du curseur suivante sera. continué avant qu'il ne soit terminé. L'animation coulissante peut provoquer le blocage de la page.
Écrivons ensuite la fonction d'animation de déplacement moveTo(). Accepte deux paramètres, index est le curseur cible à faire glisser, dir est la direction de glissement, y compris suivant et précédent. Le principe que nous utilisons pour implémenter l'animation de glissement est que la distance à laquelle le curseur actuel se déplace vers la gauche ou la droite correspond exactement à la largeur du curseur. Nous considérons cette largeur comme la zone visible. Lors du glissement, le curseur actuel se déplacera vers la gauche ou la droite. de la zone visible, et le curseur suivant entre dans la fenêtre par la gauche ou la droite. Nous utilisons la méthode animate() de jQuery pour obtenir des effets d'animation. La vitesse de déplacement des deux curseurs reste cohérente, obtenant un effet de défilement fluide. De plus, lorsque le glissement est terminé, le style de commutation des points est modifié dans le temps.

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

Liez l'événement de clic des flèches gauche et droite lorsque vous cliquez sur la flèche, déterminez si le curseur actuel est le premier curseur ou le dernier curseur, et redéfinissez l'index pour obtenir le sans fil. effet de défilement, puis appelez respectivement la fonction moveTo() pour obtenir l'effet d'animation glissante.

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

Ensuite, liez l'événement click de la navigation par points. Lorsque vous cliquez sur le petit point, le numéro de série du point actuellement cliqué est obtenu, c'est-à-dire quel point est cliqué, ce qui correspond à Les premiers curseurs, puis appelez moveTo() pour terminer l'animation de commutation.

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

Commutation automatique, nous devons d'abord définir une minuterie, setInterval exécute play() à chaque fois, play() changera le paramètre d'index à chaque fois qu'il est exécuté, appelez moveTo implémente l'effet de commutation. Enfin, lorsque la souris fait glisser le curseur vers le haut, la minuterie est effacée et lorsque la souris s'éloigne du curseur, la minuterie est automatiquement réactivée.

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

Enfin, après avoir trié le code, vous pourrez voir un effet de commutation coulissante de base, et vous pourrez également télécharger le code source pour tester.

Ce qui précède est le contenu de l'effet de commutation coulissante hwSlider-content (1). Pour plus de contenu connexe, veuillez faire attention au site Web chinois PHP (www.php.cn) !

Articles connexes :

Des exemples vous aident à comprendre l'élément de sélection de zone coulissante HTML5 Élément curseur

Effet de commutation coulissante de contenu hwSlider (2) : glissement tactile réactif

Introduction détaillée du composant de curseur d'applet WeChat