シームレスなカルーセル-jsチュートリアル-php.cn

シームレスなカルーセル

巴扎黑

リリース： 2017-06-26 15:01:12

オリジナル

1560 人が閲覧しました

カルーセル画像を作成するとき、最初と最後を接続できないと、エフェクトが少し見苦しくなります。これが私がよく使用する方法です:

まず言葉で説明します:

5を表示したい場合。写真では、1、2、3、4、5 です。コードの導入は次のようになります: 1,2,3,4,5,1

順番の回転についてはここでは説明しません。焦点は 5> です。 ;1 と 1> 5 カルーセル

i は現在の画像のインデックスを表します

pre は前の画像のボタンを表します

next は次の画像のボタンを表します

ul は画像リストを表します

(1) 5> ;1>2.. 「次へ」ボタンが 5 から 1 に進むと、現在の画像が 2 番目の「1」の場合は次の画像が「2」になり、「次」の場合は順に回転します。を使用すると、ul の左の値が 0、i==1;

(2) 1>5>4.... 現在の画像「1」から「pre」ボタンが回転するとき1) 画像 5、i==4 では、ul の左の値が img の幅の -5 倍になります。つまり、最初の 1 が最後の 1 に静かに変化します

、コードは次のとおりです:

<!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>

ログイン後にコピー

以上がシームレスなカルーセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。