仿照（小米官網首頁輪播圖）特效js程式碼

阿新 • • 發佈：2019-01-13

最近跟輪播圖槓上了，以前也接觸過這個輪播圖的寫法，但是一般都是用外掛，久而久之就忘記了！昨晚有學習了一下自己寫這個js，雖然是依靠零散的記憶寫出來的，可能自己並未真正理解吧！！！以下是我寫的程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米官網輪播圖仿照</title>
	<style type="text/css">
		.container{width: 1226px;height: 460px;margin:0 auto;position: relative;}
		.container img{position: absolute;;top:0;left: 0;display:none;}
		.left,.right{position: absolute;width: 30px;height: 60px;top:50%;margin-top:-30px;color:#fff; line-height: 60px;text-align: center; font-size: 30px;cursor:pointer;}
		.left:hover,.right:hover{background-color: #777171;}
		.left{left:0;}
		.right{right: 0;}
		.container ul{position: absolute;bottom:10px;right:10px;}
		.container ul li{float: left;list-style: none;width: 10px;height:10px;background-color: #fff;border-radius: 100%;border:1px solid #fff;margin-right:10px; line-height: 10px;}
		.container ul li.active{background-color: #776e6e;}
	</style>
</head>
<body>
	<div class="container">
				<img src="images/lb/1.jpg" alt="">
				<img src="images/lb/2.jpg" alt="">
				<img src="images/lb/3.jpg" alt="">
				<img src="images/lb/4.jpg" alt="">
				<img src="images/lb/5.jpg" alt="">
				<div class="left" id="left"><</div>
				<div class="right" id="right">></div>
				<ul>
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>		
			<script type="text/javascript">
				var lis=document.getElementsByTagName('li');
				var imgs=document.getElementsByTagName('img');
				imgs[0].style.display='block';
				len=lis.length;
				var index=0;
				for (var i =0; i<len; i++) {
					lis[i].tt=i;
					lis[i].onclick=function(){
						fadeOut(imgs[index],1);
						index=this.tt;
						changeImg(index);
						fadeIn(imgs[index],1);
					}
				}
				function getId(id){return document.getElementById(id);}
				getId('right').onclick=function(){
					fadeOut(imgs[index],1);
					index++;
					if (index>len-1) {index=0;}
					changeImg(index);
					fadeIn(imgs[index],1);

				}
				getId('left').onclick=function(){
					fadeOut(imgs[index],1);
					index--;
					if (index<0) {index=0;alert('已經是第一張了！');}
					changeImg(index);
					fadeIn(imgs[index],1);
					
				}


				function changeImg(dd){

					for(var j=0;j<len;j++){
							lis[j].className='';
							imgs[j].style.display='none';

						}
						lis[dd].className='active';
						imgs[dd].style.display='block';

				}

				// 淡入淡出效果
				function fadeIn(obj,speed){
					obj.style.display='block';
					// obj.style.opacity='0';
					var opa=0;
					var timer=null;
					timer=setInterval(function(){

						opa=opa+speed;
						if (opa>100) {opa=100;clearInterval(timer);}
						obj.style.opacity=opa/100;		
					},13);
				}
				function fadeOut(obj,speed){
					// obj.style.display='none';
					// obj.style.opacity='100';
					var opa='100';
					var timer=null;
					timer=setInterval(function(){

						opa=opa-speed;
						if (opa<0) {opa=0;clearInterval(timer);}
						obj.style.opacity=opa/100;		
					},13);
				}
			</script>
</body>
</html>

照幾張圖片，放上其實是看，是否能執行吧！

仿照（小米官網首頁輪播圖）特效js程式碼

最近跟輪播圖槓上了，以前也接觸過這個輪播圖的寫法，但是一般都是用外掛，久而久之就忘記了！昨晚有學習了一下自己寫這個js，雖然是依靠零散的記憶寫出來的，可能自己並未真正理解吧！！！以下是我寫的程式碼：&

three.js的wave特效（ivew官網首頁波浪特效實現）

alt 使用實現功夫 inf 有效訪問顏色 index 查看效果請訪問：https://521lbx.github.io/Web3D/index.html公司的好幾個vue項目都是用ivew作為UI框架，所以ivew官網時不時就得逛一圈。每一次進首頁都會被首頁的波浪

淘淘商城系列（五）—— 首頁輪播圖展示（一）

首頁輪播圖展示 taotao-portal-web工程中，動態展示內容資訊。前端團隊：負責JS，html等開發。後端團隊：負責後臺的開發並提供資料給前端。 1、功能分析只需要動態生成一個json資料，輪播圖就可以動態展示： taotao-portal

JS 實現3D立體效果的首頁輪播圖（瞬間讓你的網站高大上，逼格滿滿）

var HR = { $: function(i) { return document.getElementById(i) }, $$: function(c

原生js模仿網易雲音樂首頁輪播圖

前端初學者，最近在學習該如何寫輪播圖。看了一些大神的教程之後，想模仿著寫一個和網易雲音樂首頁類似的輪播圖。由於還沒有學JQuery，所以自己想了個函式用來實現淡入的效果。邏輯思路借鑑了效果：以下是我的程式碼，分享給大家~<!DOCTYPE html> <ht

Boostrap部落格網站搭建（三）-首頁輪播圖實現

1、使用輪播圖外掛這裡我們使用swiper.js外掛並附上下載地址：https://pan.baidu.com/s/1c3MifM4 下面就需要新增HTML程式碼了 <div class="jumbotron container-slider"> &

首頁輪播圖

style use outer dex nbsp list his hover mov <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

用原生JS 寫Web首頁輪播圖

get ext ++ posit containe add adding time 按鈕目前自己在學習JS中，用目前學到的東西寫了一個輪播圖，能完整的實現輪播圖的功能，但是肯定還是有不完善的地方，也希望大家能留言交流，一起學習。一、思路首先將功能一個一個理順

小程式開發-專案實戰-首頁輪播圖

3.6.1 首頁輪播圖介面目錄結構 index資料夾 index.js index的js檔案 index.wxml index的頁面檔案 index.wxss index的樣

首頁輪播圖資料的載入

1、npm 安裝 VueResource 2、main.js 中匯入 VueResource //匯入 vue-resource import VueResource from 'vue-resource' Vue.use(VueResource) 3、在需要的 vue 檔案中訪問資料，

Android (github開源專案1)首頁輪播圖控制元件----banner

前段時間因為公司原因再加上自己比較懶，已經很久沒有更新部落格了。最近閒置下來，為大家帶來一些我在我專案中使用到的一些比較好用的github上面的開源控制元件。今天就為大家帶來首頁banner的控制元件

Android--仿愛奇藝首頁輪播圖

前因近期開啟愛奇藝的時候，突然發現它首頁的輪播圖跟以前不一樣了，左右兩個圖都能顯示一部分，且有滑動時縮放的效果，一直不知咋樣實現，然後在鴻洋的微信公眾號中看到了一篇仿魅族Banner效果的文章，最後在參考中放出了連結，然後就參考了這篇文章，就在此做個記錄。廢

day72_淘淘商城專案_05_首頁輪播圖顯示實現 + redis的安裝及使用 + redis叢集環境搭建 + redis實現快取 + 快取同步_匠心筆記

淘淘商城專案_05 1、首頁輪播圖的展示 1.1、功能分析 1.2、Dao層 1.3、Service層 1.3.1、釋出服務 1.4、表現層 1.

實戰SSM_O2O商鋪_40【前端展示】首頁輪播圖和一級商鋪View層的實現

概述 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-

淘淘商城系列——首頁輪播圖展示

上文我們一起學習了內容管理，由於時間太緊了，好多功能都沒實現，在此對讀者說聲抱歉！以後我一定會完善這些功能，讀者如果有興趣，也可以實現這些功能，希望大家都能學有所成。廢話扯了一大堆，進入主題，本文我們將一起學習如何展示商城首頁的輪播圖。首先，看一下index

FlexSlider外掛的詳細設定引數（相容PC和移動的輪播圖）

$(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //圖片變換方式：淡入淡出或者滑動 slideDirection: "horizon

開發”小米商城官網首頁”（靜態頁面）

配件 16px -i ont div name :after 路由器 clas 開發“小米官方網站首頁”（靜態頁面）官網 https://www.mi.com/ HTML index.html <!DOCTYPE html> <html lang

開發“小米商城官網首頁”（靜態頁面）

開發 ul li name containe cursor arch ont select 代碼一，項目題目：開發”小米商城官網首頁”（靜態頁面）二，項目需求 1.熟練運用所學知識還原小米商城官網首頁靜態頁面 * 不需要做動態效果，只實現靜態頁面，後期學完js再回

利用HTML和CSS設計一個靜態的“小米商城官網首頁”

一、小專案說明　　這是個例行的小專案練習，主要利用html和css的基礎知識，復刻一個縮減版的小米商城網頁。包括【導航欄】、【頭部logo區，快捷鍵、搜尋框】、【網頁主體】、【網頁尾部】幾個部分。目前只實現靜態的網頁顯示。最終效果圖如下：二、程式框架　　按照開發規範，先

Netty官網首頁（翻譯）

維護 protoc 網絡編程技術影響 tex str 編寫 sport 官網：https://netty.io/ Netty是一個異步事件驅動的網絡應用程序框架，用於快速開發可維護的高性能協議服務器和客戶端。 Netty是一個NIO客戶端服務器框架，可以快速輕松地開

仿照（小米官網首頁輪播圖）特效js程式碼

相關推薦