JavaScript(3)：使用JS實現輪播圖效果

1.前言

​ 使用原生JS實現輪播圖的效果，也就是不用到其他js擴展庫和框架實現的。此外，我還用jQuery實現了，效果和功能都是一樣，參考文章《JQuery(1)：使用JQuery實現輪播圖效果》。

​ 如有侵權下方評論聯繫作者刪除

2.實現功能

​ (1) 輪播圖上有兩個按鈕，分別位於左側和右側，實現跳轉到上一張圖片和下一張圖片的功能。

​ (2) 圖片右下角有三個小圓點，會隨着圖片的變化而變化，和圖片相對應。鼠標放入小圓點，實現圖片更換。

​ (3) 實現自動播放，沒隔2000毫秒自動更換圖片。鼠標移入圖片，自動播放失效，移出圖片，自動播放又設置生效。

3.代碼實現

​ （1）css樣式

* {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

img {
    border: none;
    vertical-align: bottom;
}

a {
    text-decoration: none;
}

.banner {
    width: 665px;
    height: 340px;
    border: 2px solid deeppink;
    margin: 100px auto;
    position: relative;
}

.list li {
    width: 665px;
    height: 340px;
    /*定位疊加*/
    position: absolute;
    left: 0px;
    top: 0px;
    /*隱藏*/
    display: none;
    z-index: 99;
}

.list li.active {
    display: block;
}

.banner>a {
    width: 59px;
    height: 80px;
    /*定位疊加*/
    position: absolute;
    top: 50%;
    margin-top: -40px;
    z-index: 100;
    /*設置透明度   0-1值   */
    opacity: 0.5;
}

.banner>a:hover {
    opacity: 0.8;
}

.prev {
    left: 0px;
    background: url(img/pre.png);
}

.next {
    right: 0px;
    background: url(img/next.png);
}

.number {
    position: absolute;
    z-index: 100;
    width: 60px;
    right: 10px;
    bottom: 10px;
}

.number span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    float: left;
    margin: 0px 5px;
    cursor: pointer;
}

.number .current {
    background: deepskyblue;
}

​ （2）js代碼

	var oBanner = document.querySelector('.banner');
	var oPrev = document.querySelector('.prev');
	var oNext = document.querySelector('.next');
	var oList = document.querySelector('.list');
	var aLi = oList.querySelectorAll('li');
	var oNum = document.querySelector('.number');
	var aSpan = oNum.querySelectorAll('span');

	var n = 0;
	//點擊下一張事件
	oNext.onclick = rightBtn;
	//點擊上一張事件
	oPrev.onclick = function() {
		//變化的量  
		n--;
		//驗證
		n = n < 0 ? aLi.length - 1 : n;
		//調用設置方法
		play();
	};

	//小圓點交互，點擊  鼠標移入  三個span都要有點擊事件
	//批量監聽
	for (var i = 0; i < aSpan.length; i++) {
		//會用到下標  IIFE
		(function(m) {
			//監聽 m  012
			aSpan[m].onmouseover = function() {
				console.log(m);
				//操作n 橋接
				n = m;
				//調用設置方法
				play();
			};

		})(i);
	};


	//自動播放
	var timer;
	timer = setInterval(rightBtn, 2000);
	//鼠標移入
	oBanner.onmouseover = function() {
		//停止定時器
		clearInterval(timer);
	};
	//鼠標移出
	oBanner.onmouseout = function() {
		//開定時器
		timer = setInterval(rightBtn, 2000);
	};

	//封裝右邊按鈕業務
	function rightBtn() {
		//變化的量  0123== 012012012
		n++;
		//驗證
		n = n > aLi.length - 1 ? 0 : n;
		//調用設置方法
		play();

	};

	//封裝
	function play() {
		//先讓所有的隱藏  排它模型
		for (var i = 0; i < aLi.length; i++) { // 3
			aLi[i].style.display = 'none';
			//讓所有的小圓點變白(去掉current類名)
			aSpan[i].className = '';
		};
		//讓我當前元素顯示，其它隱藏
		aLi[n].style.display = 'block';
		//小圓點跟隨  也要用排它!!!   span 012對應li 012的下標  對應模型li的下標   n
		aSpan[n].className = 'current';
	};

（3）html

<div class="banner">
    <!--按鈕-->
    <a href="javascript:;" class="prev"></a>
    <a href="javascript:;" class="next"></a>

    <!--輪播的項-->
    <ul class="list">
        <li class="active"><a href=""><img src="img/1.jpg" /></a></li>
        <li><a href=""><img src="img/2.jpg" /></a></li>
        <li><a href=""><img src="img/3.jpg" /></a></li>
    </ul>

    <!--小圓點-->
    <div class="number">
        <span class="current"></span>
        <span></span>
        <span></span>
    </div>
</div>

4.效果展示