Maison > Article > interface Web > Carrousel carrousel sans soudure

Carrousel carrousel sans soudure

巴扎黑original: 2017-06-26 15:01:121553parcourir

Si le début et la fin ne peuvent pas être connectés lors de la création d'images de carrousel, l'effet sera un peu moche. Voici une méthode que j'utilise couramment :

Expliquez d'abord dans le texte :

Si. vous souhaitez afficher 5 images, respectivement 1, 2, 3, 4, 5. Ensuite l'introduction du code est la suivante : 1, 2, 3, 4, 5, 1

L'ordre de rotation est ici Pas grand chose à dire, l'essentiel c'est le carrousel de 5>1 et 1>5

i représente l'index de la photo actuelle

pre représente le bouton de la photo précédente

next représente le bouton pour l'image suivante

ul représente la liste d'images

(1) 5>1>2... Quand le bouton "suivant" passe de 5 à 1, elle tourne normalement dans l'ordre, lorsque l'image actuelle est la deuxième "1", l'image suivante doit être "2", puis lorsqu'elle est "suivante", la valeur gauche de ul est 0, i==1 ; 🎜>

(2) 1>5>4.... Lorsque le bouton "pre" passe de l'image actuelle "1" (la première 1) à l'image 5, i==4, la valeur gauche de ul devient -5 qui est la largeur des temps img, c'est-à-dire que le premier 1 devienne tranquillement le dernier 1

C'est un peu déroutant à exprimer en langage, voici le code :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		.container{
			width: 273px;height: 163px;overflow: hidden;
			position: relative;margin: 0 auto;
		}
		.list{
			position: absolute;width: 1638px;top: 0;left: 0px;
		}
		.list li{
			float: left;list-style: none;
		}
		.btn{
			position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;
			text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;
		}
		.btn:hover{
			background-color: rgba(0,0,0,0.3);color: #fff;
		}
		.pre{
			left: 0;
		}
		.next{
			right: 0;
		}
		.nav{
			position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;
		}
		.nav span{
			width: 10px;height: 10px;border-radius: 10px;background-color: #fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;
		}
		span.on{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="container">
		<ul class="list" style="left: 0px">
			<li><img src="./images/1.png" alt=""></li>
			<li><img src="./images/2.png" alt=""></li>
			<li><img src="./images/3.png" alt=""></li>
			<li><img src="./images/4.png" alt=""></li>
			<li><img src="./images/5.png" alt=""></li>
			<li><img src="./images/1.png" alt=""></li>
		</ul>
		<div class="nav">
			<span class="on"></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		<em class="next btn">></em>
		<em class="pre btn"><</em>
	</div>
	<script type="text/javascript" src="../jquery.js?1.1.11"></script>
	<script type="text/javascript">
		$(function(){
			var i=0;
			$(&#39;.next&#39;).click(function(){
				i++;
				console.log(i);

				moveImg(i);
				
			});
			$(&#39;.pre&#39;).click(function(){
				i--;
				moveImg(i);
				
			});
			$(&#39;.nav span&#39;).click(function(){
				var _index=$(this).index();
				i=_index;
				moveImg(i);

				
			});
			// i的作用：决定下一张图片是谁————也就是说ul的left是多少。
			// $(&#39;.list&#39;).css({left)的值是从图a过度是此时的ul的left。
			function moveImg(){
				if (i==6) {
					i=1;
					$(&#39;.list&#39;).css({&#39;left&#39;:&#39;0&#39;});
				}
				 // 是第一张
		        if(i==-1){
		            i=4;
		            $(&#39;ul&#39;).css({left:(5*-273)});
		        }
				$(&#39;.list&#39;).stop().animate({&#39;left&#39;:-273*i+&#39;px&#39;},1000);
				if (i==5) {
				$(&#39;.nav span&#39;).eq(0).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);

				}
				$(&#39;.nav span&#39;).eq(i).addClass(&#39;on&#39;).siblings().removeClass(&#39;on&#39;);

			}
		})
	</script>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée d'exemples de fonctionnement efficace jQuery des éléments de pageArticle suivant：Explication détaillée d'exemples de fonctionnement efficace jQuery des éléments de page

Articles Liés

Voir plus