輪播圖無縫輪播-js教程-PHP中文網

首頁

web前端

js教程

輪播圖無縫輪播

巴扎黑

Jun 26, 2017 pm 03:01 PM

在做輪播圖時如果首尾不能連起來的話，效果會有點醜，下面介紹一種我常用的方法：

先文字說明一下：

如果要展示5張圖，分別為1,2,3,4,5 那麼在代碼的引入中是這樣的：1,2,3,4,5,1

按順序的輪播在此就不多說，重點說的是5>1和1>5的輪播

i 表示目前圖片的索引

pre 表示上一張圖片的按鈕

# next 表示下一張圖片的按鈕

ul 表示圖片清單

(1) 5>1>2... 當「next」按鈕從5到1時依序正常輪播，當前圖片為第二個“1”時，下一張圖片應該是“2”，那麼再“next”時是ul的left的值為0，i==1；

#(2 ) 1>5>4.... 當「pre」按鈕從目前圖片「1」（第一個1）輪播到圖片5時，i==4，ul的left值變為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="/static/imghwm/default1.png"  data-src="./images/1.png"  class="lazy"   alt=""></li>
			<li><img src="/static/imghwm/default1.png"  data-src="./images/2.png"  class="lazy"   alt=""></li>
			<li><img src="/static/imghwm/default1.png"  data-src="./images/3.png"  class="lazy"   alt=""></li>
			<li><img src="/static/imghwm/default1.png"  data-src="./images/4.png"  class="lazy"   alt=""></li>
			<li><img src="/static/imghwm/default1.png"  data-src="./images/5.png"  class="lazy"   alt=""></li>
			<li><img src="/static/imghwm/default1.png"  data-src="./images/1.png"  class="lazy"   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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。