【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

来源:http://www.cnblogs.com/dragonir/archive/2017/11/02/7775203.html
-Advertisement-
Play Games

實現效果: 實現原理: 技術棧: javascript+jQuery+html+css 實現步驟: // 0. 獲取元素 // 1. 滑鼠放置到輪播圖上,顯示兩側的控制按鈕,移開後隱藏 // 2. 為兩側控制按鈕綁定事件(調用同一個方法,只有一個參數,true為正向旋轉,false為反向旋轉) 實現 ...


實現效果:

 

實現原理:

  • 技術棧:

javascript+jQuery+html+css

  • 實現步驟:

// 0. 獲取元素

// 1. 滑鼠放置到輪播圖上,顯示兩側的控制按鈕,移開後隱藏

// 2. 為兩側控制按鈕綁定事件(調用同一個方法,只有一個參數,true為正向旋轉,false為反向旋轉)

 

實現代碼:

 

<!DOCTYPE html>
<html>
<head>
	<title>旋轉木馬效果輪播圖</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			font: 12px/1.5 "微軟雅黑";
			background-color: #2f2f2f;
		}
		a{
			text-decoration: none;
			outline: none;
			cursor: pointer;
		}
		.warp{
			width: 1000px;
			margin: 10px auto;
			border: 1px solid red;
		}
		.slide{
			height: 200px;
			margin: 150px auto;
			position: relative;
		}
		.slide li{
			position: absolute;
			left: 200px;
			top: 0;
		}
		.slide li img{
			width: 100%;
			border: 0;
			vertical-align: top;
		}
		ul{
			list-style: none;
		}
		.arrow{
			opacity: 0;
		}
		.prev, .next{
			width: 76px;
			height: 112px;
			position: absolute;
			top: 50%;
			margin-top: -56px;
			background: url('images/prev.png') no-repeat;
			z-index: 999;
		}
		.next{
			right: 0;
			background-image: url('./images/next.png');
		}
	</style>
</head>
<body>
<div class="wrap" id="wrap">
	<div class="slide" id="slide">
		<ul>
			<!-- 五張圖片 -->
			<li><a href="#"><img src="./images/01.jpg"></a></li>
			<li><a href="#"><img src="./images/02.jpg"></a></li>
			<li><a href="#"><img src="./images/03.jpg"></a></li>
			<li><a href="#"><img src="./images/04.jpg"></a></li>
			<li><a href="#"><img src="./images/05.jpg"></a></li>
		</ul>
		<!-- 左右切換按鈕 -->
		<div class="arrow" id="arrow">
			<a href="javascript:;" class="prev"></a>
			<a href="javascript:;" class="next"></a>
		</div>
	</div>
</div>
<!-- 引入jQuery -->
<script src="jquery1.0.0.1.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var arr = [
                {   //  1
                    width:400,
                    top:0,
                    left:170,
                    opacity:20,
                    zIndex:2
                },
                {  // 2
                    width:600,
                    top:70,
                    left:80,
                    opacity:80,
                    zIndex:3
                },
                {   // 3
                    width:800,
                    top:50,
                    left:250,
                    opacity:100,
                    zIndex:4
                },
                {  // 4
                    width:600,
                    top:70,
                    left:600,
                    opacity:80,
                    zIndex:3
                },
                {   //5
                    width:400,
                    top:0,
                    left:720,
                    opacity:20,
                    zIndex:2
                }
            ];

		// 0. 獲取元素
		var slide = document.getElementById("slide");
		var liArr = slide.getElementsByTagName("li");
		var arrow = slide.children[1];
		var arrowChildren = arrow.children;

		// 設置一個開閉變數,點擊以後修改這個值
		var flag = true;

		// 1. 滑鼠放置到輪播圖上,顯示兩側的控制按鈕,移開後隱藏
		slide.onmouseenter = function(){
			animate(arrow,{"opacity":100});
		}
		slide.onmouseleave = function(){
			animate(arrow, {"opacity":0});
		}

		move();

		// 3. 為兩側控制按鈕綁定事件(調用同一個方法,只有一個參數,true為正向旋轉,false為反向旋轉)
		arrowChildren[0].onclick = function(){
			if(flag){
				flag = false;
				move(true);
			}
		}
		arrowChildren[1].onclick = function(){
			if(flag){
				flag = false;
				move(false);
			}
		}

		// 書寫slider移動函數
		function move(bool){
			// 判斷,如果等於undefined,那麼不執行這兩個if語句
			if(bool === true || bool === false){
				if(bool){
					// 將最後一個添加到第一個位置
					arr.unshift(arr.pop());
				}
				else{
					// 將第一個添加到最後一個位置
					arr.push(arr.shift());
				}
			}
			// 再次為頁面的所有li賦值屬性,利用緩動框架
			for(var i=0; i<liArr.length; i++){
				animate(liArr[i], arr[i], function(){
					flag = true;
				});
			}
		}
	}
</script>
</body>
</html>

 

  

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ...
  • ...
  • window.location.hash 使用說明 今天給大家詳細彙總了關於window.location.hash的知識點,屬性以及用法等等,非常的實用,並附上了例子,有需要的小伙伴可以參考下。 location是javascript裡邊管理地址欄的內置對象,比如location.href就管理頁 ...
  • 金三銀四搞事季,前端這個近年的熱門領域,搞事氣氛特別強烈,我朋友小偉最近就在瘋狂面試,遇到了許多有趣的面試官,有趣的面試題,我來幫這個搞事 boy 轉述一下。 以下是我一個朋友的故事,真的不是我。 “小偉,你說說這幾行代碼會輸出什麼?” 當面試官在 Sublime 打出這幾行代碼時,我竟有點矇蔽。蛤 ...
  • 一、介紹 老鐵們,這次是JS的面向對象的編程OOP(雖然我沒有對象,心累啊,但是可以自己創建啊,哈哈)。 JS高程里第六章的內容,這章內容在我看來是JS中很難理解的一部分。所以分成三篇博客來逐個理清。 這是第一篇:理解對象,認識對象屬性的類型。 二、理解對象 書中原話 ECMA 262中把對像定義為 ...
  • 前言 今天夜間接到某BAT面試電話,問了些演算法的問題,說實話,感覺有點蒙逼,尤其是被問到了節點樹遍歷的問題。 對於樹形遍歷,在平常開發中很少碰到,多數碰到的是對象的深複製,也就想當然的遞歸調用了,根本沒考慮過性能方面的問題。 當面試官讓我用另一種方式進行遍歷,還有其他方式?(提示: 模擬棧或隊列來實 ...
  • 概念 執行環境(Execution context,簡稱EC)或執行上下文對象(後面統一用執行上下文表示),它定義了變數或者函數有權訪問的其他數據,決定了他們各自的行為。是不是有點不好理解,那我先簡單翻譯下: js代碼執行時所在的環境。繼續後面 在JavaScript中執行環境分三種: 執行上下文棧 ...
  • ES6 強制開啟嚴格模式 作用域 var 聲明局部變數,for/if花括弧中定義的變數在花括弧外也可訪問 let 聲明的變數為塊作用域,變數不可重覆定義 const 聲明常量,塊作用域,聲明時必須賦值,不可修改 解構賦值 使用場景 變數交換 獲取多個函數值 獲取多個函數返回值 對象解構賦值 獲取js ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...