집 > 기사 > 웹 프론트엔드 > 원활한 회전목마 회전목마

원활한 회전목마 회전목마

巴扎黑원래의: 2017-06-26 15:01:121498검색

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jQuery를 이용한 페이지 요소의 효율적인 동작 예시에 대한 자세한 설명다음 기사：jQuery를 이용한 페이지 요소의 효율적인 동작 예시에 대한 자세한 설명