search

Home  >  Article  >  Web Front-end  >  Seamless carousel carousel

Seamless carousel carousel

巴扎黑
巴扎黑Original
2017-06-26 15:01:121563browse

If the beginning and end cannot be connected when making carousel images, the effect will be a bit ugly. Here is a method I commonly use:

First explain in text:

If you want to display 5 pictures, respectively 1, 2, 3, 4, 5. Then the introduction of the code is like this: 1, 2, 3, 4, 5, 1

The order of rotation is here Not much to say, the main point is the carousel of 5>1 and 1>5

i represents the index of the current picture

pre represents the button of the previous picture

next represents the button for the next picture

ul represents the picture list

(1) 5>1>2... When the "next" button goes from 5 to 1, it rotates normally in order , when the current picture is the second "1", the next picture should be "2", then when it is "next", the left value of ul is 0, i==1;

(2 ) 1>5>4.... When the "pre" button rotates from the current picture "1" (the first 1) to picture 5, i==4, the left value of ul becomes -5 which is the width of img times, that is, let the first 1 quietly become the last 1;

It’s a bit confusing to express in language, here is the 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>

　

The above is the detailed content of Seamless carousel carousel. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of examples of efficient operation of page elements with jQueryNext article：Detailed explanation of examples of efficient operation of page elements with jQuery

Related articles

See more