html+css+js 實作圖片輪播效果

html+css+js 實作圖片輪播效果

圖片輪播效果：

• 會自動 向左 || 向右 切換圖片
• 能手動點擊按鈕切換圖片
• 多用于商品展覽等等
  
  ——首先我們創建一個盒子進行展覽，然后一個< ul>，< li>來存每張圖片，
  話不多說，放 代碼：
  HTML

<div id="banner">
			<ul id="ul">
				<li><a href="###"><img src="./images/dianyuan.jpg" /></a></li>
				<li><a href="###"><img src="./images/shouhuan.jpg" /></a></li>
				<li><a href="###"><img src="./images/mi4.jpg" /></a></li>
			</ul>
			<span id="left" onclick="left()">< </span>
			<span id="right" onclick="right()">></span>
			<ol id="ol">
				<!--由js動態生成<li>-->
			</ol>
		</div>

CSS
這里css的設定不算重要，大家根據我的注釋看一下

#banner {
	height: 75%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

#banner #ul {
	width: 6600px;		/*ul的寬度我們選擇業讓那個js動態生成,這樣可以減少后期修改帶來的麻煩*/
	height: 100%;
	position: absolute;
	left: -0350px;				/*因為我的圖片比較大,所以為了能讓內容居中,于是移了一些出去*/
	top: 0;
}

#banner li {
	float: left;			/*浮動,使所有圖片排成一行*/
	width: 2200px;			/*設定每個li的寬度(根據自己的圖片width進行選擇)*/
	height: 100%;
}

#banner img {
	width: 100%;
	position: relative;
}
#banner #left , #banner #right{		/*兩邊的left、right按鈕（<  >）*/
	width: 40px;
	height: 40px;
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -20px;
	background-color: cadetblue;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-family: '黑體';
	font-size: 30px;
	color: #000;
	opacity: 0.5;
	border: 1px solid #fff;
}
#banner #right{
	right: 5px;
	left: auto;
}
#banner #left:hover , #banner #right:hover{
	opacity: 1;
	border-color: #000;
	color: #fff;
}
#banner #ol{				/*底部的圖片精準選擇按鈕*/
	position: absolute;
	bottom: 10px;
	left: 50%;
}
#banner #ol li{
	border-radius: 45px;			/*令其呈圓形*/
	width: 15px;
	height: 15px;
	background-color: #CCCCCC;
	cursor: pointer;			/*滑鼠呈 手 樣式*/
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	font-family: '黑體';
	font-size: 15px;
	color: #000;
	opacity: 0.5;				/*設定透明度*/
	border: 2px solid #333;
	float: left;
	margin: 0 10px;
}
#banner #ol li:hover{
	opacity: 0.8;
}
#banner #ol .now{				/*當前展示圖片所對應的數字按鈕(這個.now我們由js動態設定)*/
	opacity: 1;					/*不透明*/
	background-color: #333;
}

js部分 重頭來啦~~~~~~~~~~~~~~~~~~~~

首先我們先進行物件成員的賦值

• obj.offsetLeft：獲取物件的left屬性值（只讀）
• obj.offsetWidth：獲取物件的width屬性值（只讀）

var ul = document.getElementById("ul");
var ol = document.getElementById("ol");
var li = ul.getElementsByTagName("li");
var li_width = li[0].offsetWidth;				//獲得li的寬度
var left_start = ul.offsetLeft;			//獲取當前第一張圖片的left
ul.style.width=(li_width*li.length)+"px";

然后是對< ol> < li>的初始化創建

• var one=setInterval(“right()”,3000)

  • setInterval() ：方法可按照指定的周期（以毫秒計）來呼叫函式或計算運算式，
  • 回傳一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值，
  • 我們讓它每過3秒就呼叫一次right()向右滑動

• 我們在click的點擊中先清除掉setInterval，再創建setInterval，這樣可以讓用戶在選擇是有足夠的時間觀看

var one=setInterval("right()",3000);			//setInterval() ：方法可按照指定的周期（以毫秒計）來呼叫函式或計算運算式，

for(var i=0 ; i<li.length ; i++){				//動態生成底部按鈕數字按鈕
	var ol_li=document.createElement("li");		//創建<li>標簽
	ol.appendChild(ol_li);						//加入將ol_li加入到<ol>標簽中
	ol_li.id=i+1;						//設定id，主要是方便后面的數字計算
	ol_li.onclick=function(){
		clearInterval(one);
		pic=this.id;
		ul.style.left = (left_start - (pic-1) * li_width) + "px";	//點擊那個li就會跳轉到那張圖片
		change();			//見下文
		one=setInterval(right,3000);	//前面取消了周期時間one，現在又把它開啟，后面也會有這種操作，主要是為了使用方便
	}
}

這里我們設定了一下邏輯功能，以及change()方法

• pic：這里用來關聯當前所展示的圖片
• obj.className：設定標簽的class名稱，設定完畢后會被css所更改相應樣式

var pic=1;
var last=document.getElementById(pic);	//定義last變數指向一個li標簽
last.className="now";  //在css中我已經將class為now的樣式設定為特殊設定，是為了突出

function change(){				//“改變”方法：動態設定當前顯示的圖片所對應按鈕的格式
	last.className=" ";			//清除上一個的格式
	document.getElementById(pic).className="now";	//為當前li添加className（需要css配合使用.now{設定格式}）
	last=document.getElementById(pic);		//更新last
}

接下來就是最重要的部分了left()與right()

• 這里我自認為注釋已經寫得很全了，哈哈哈哈，若有那里不清楚的歡迎評論
• 這里主要就是一些邏輯的部分，利用幾個屬性來回改變< ull>的left
  • left值越少，就越到后面的圖片

ul.style.transition="left 0.5s, right 0.5s";	//為圖片輪播效果加一個transition過渡影片，當然是為了更好看啦

function left() {			//向左按鈕
	clearInterval(one);							//先暫停
	if (ul.offsetLeft > left_start - li_width) {	//考慮到當前圖片已經是第一張，點擊left按鈕就跳向最后一張
		ul.style.left = (left_start - (li.length - 1) * li_width) + "px";
		pic=li.length;			//li.length就相當于是最后一張圖片的id了（見前面這只id部分）
	} else {
		ul.style.left = (ul.offsetLeft + li_width) + "px";
		pic--;				//向前翻一張，當然就減一了
		// alert(ul.offsetLeft);
	}
	change();			//每次改變是都呼叫change()函式
	one=setInterval(right,3000);				//重新開始周期呼叫
}

function right() {			//向右按鈕
	clearInterval(one);
	if (ul.offsetLeft < left_start - (li.length - 2) * li_width) {//考慮到已經是最后一張的情況，跳向第一張
		ul.style.left = (left_start) + "px";
		pic=1;
	} else {
		ul.style.left = (ul.offsetLeft - li_width) + "px";
		pic++;
		// alert(ul.offsetLeft);
	}
	change();				//呼叫改變函式
	one=setInterval(right,3000);
}

好了，碼字不易，歡迎 點贊 評論