원활한 회전목마 회전목마-JS 튜토리얼-php.cn

원활한 회전목마 회전목마

巴扎黑

풀어 주다： 2017-06-26 15:01:12

원래의

1598명이 탐색했습니다.

회전목마 그림을 만들 때 시작과 끝이 연결되지 않으면 효과가 좀 보기 흉합니다. 제가 자주 사용하는 방법은 다음과 같습니다.

먼저 말로 설명하겠습니다.

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로 가면 정상적으로 순서대로 회전합니다. 현재 그림이 두 번째 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!