JavaScript自動/點擊輪播圖

自動/點擊輪播圖

輪播圖有很多實現的方法 這裏給大家帶來一種通過改變圖片地址的方法 複用性很高只需要改變圖片地址對象的名字就行 下面上代碼

---

由於用到的代碼和樣式不多 全部放在一個頁面了

HTML 部分

	<div class="picture">
		<div class="img">
			<img src="01.jpg" id="pic">
			<p class="radius"></p>
		</div>
		<div id="arr"></div>
		<div id="arl"></div>
	</div>

這個就不用多說了最外面一個框 裏面是圖片的框和一張圖片 ， 下面的兩個是上一張/下一張的按鈕

CSS 部分

		.picture {
		position: relative;
		width: 1000px;
		height: 500px;
		margin: 0 auto;
		border: 2px solid black;
		border-radius: 8px;
		}
		.radius{
		width: 100%;
		height: 10px;
		line-height: 10px;
		position: absolute;
		bottom: 30px;
		text-align: center;
		}
		.dead{
		width: 10px;
		height: 10px;
		display: inline-block;
		border: 3px solid white;
		background-color: white;
		border-radius: 50%;
		margin-left: 10px;
		}
		.dead:hover{
		background-color: #73c9e5;
		}
		.active{
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
		margin-left: 10px;
		border-width: 0;
		background-color: transparent;
		background-image: url('icon.png');
		background-size: cover;
		background-repeat: no-repeat;
		}
		#arl{
		background-image: url('left.jpg');
		background-size: cover;
		}
		#arr{
		left: 940px;
		background-image: url('right.jpg');
		background-size: cover;
		}
		#arr,#arl{
		width: 60px;
		height: 60px;
		position: absolute;
		background-color: transparent;
		bottom:200px;
		border-radius: 50%;
		}

CSS部分也是根據大家的需求和想法實現就可以了 ， 這裏放一張效果圖大家對照我的樣式作爲參考就可以了
active狀態爲一個小的喫豆人，dead爲一個白色的圓圈並帶有僞類效果（淡藍色的圓心）

JavaScript 部分

var imgs = document.getElementById("pic");
var picture = document.getElementsByClassName("picture")[0];
var address = ["01.jpg", "02.jpg", "03.jpg", "04.jpg"];
var adlen = address.length;
//定義當前圖片頁數
var m = 0;
var pp = document.getElementsByTagName("p")[0];
var arr = document.getElementById("arr");
var arl = document.getElementById("arl");
for (i = 0; i < adlen; i++) {
	pp.innerHTML += "<span></span>"
}
var spans = document.getElementsByTagName('span');

//小圖標跟隨圖片切換
function change() {
	imgs.src = address[m]
	for (let k = 0; k < spans.length; k++) {
		if (k != m) {
			spans[k].className = 'dead'
		}
	}
	spans[m].className = 'active';
}

//初始化所有小圖標
change()

for (let j = 0; j < spans.length; j++) {
	spans[j].index = j;
	//點擊下面的索引圖標事件
	spans[j].onclick = function() {
		clearInterval();
		m = this.index;
		imgs.src = address[m]
		change()
	}
}
//點擊下一張事件
arr.onclick = function() {
	clearInterval(time);
	var now = document.getElementsByClassName("active")[0].index;
	if (now == adlen - 1) {
		now = -1;
	}
	m = now + 1;
	change()
}
//點擊上一張事件
arl.onclick = function() {
	clearInterval(time);
	var now = document.getElementsByClassName("active")[0].index;
	if (now == 0) {
		now = adlen;
	}
	m = now - 1;
	change()
}
//輪播函數
function roll() {
	change()
	m++;
	if (m >= adlen) {
		m = 0
	}
}
//鼠標懸停停止輪播
picture.onmouseover = function(e){
	clearInterval(time);	
}
picture.onmouseout = function(){
	time = setInterval(roll, 1000)
}
//循環定時器控制輪播
var time = setInterval(roll, 1000)

部分註釋已經標在代碼中了，下面也是簡單說明幾個重要部分：

1. 首先我們html頁面上只有一張圖片 我們把圖片全部存放在名字爲address的數組中 也是方便後期直接替換數組就可以了
2. 然後我們的變量聲明都是從頁面上獲取一些後面需要用到的元素這裏m的值是最關鍵的一個變量它控制着自動輪播的順序 並在後面事件發生後要及時進行更改
3. 然後我們根據address裏面圖片的數量動態添加span標籤 也就是圖片下面的索引圖標 然後我們將第一張圖片的索引圖標初始設置爲active ， 其他設置爲dead
4. 下面的三個 onclick事件都是爲了做到點擊索引圖標和上/下張按鈕起到切換圖片地址 並同時綁定索引圖標和圖片的序號做到同步並修改其他索引圖標的樣式爲dead 當前圖片對應的圖標爲active同時要及時判斷當前圖片的前面和後面還有沒有圖片並及時修改m值
5. 最後一個roll設置圖片本身爲自動切換狀態 這裏重點是輪播的參數除了是跟隨我們一開始的m=0自動輪播 當我們進行任何一個點擊操作後要及時傳入當前的m值做到輪播順序爲接着播放

另外這裏也給大家提供另一種思路：我們將四張圖片設置浮動放在同一行 爲圖片框設置over-flow：hidden然後控制圖片的left值做到圖片平行輪播 但注意要多複製一份貼在後面避免出現空白段

---

如有錯誤，請指正！