使用原生js制作輪播圖特效

輪播圖是網頁中很重要的一塊的内容，今天用原生JS做一個輪播圖特效，對于了解輪播圖實作原理是很有幫助的

中間内容部分

<div id="banner">
		<!-- 圖檔 -->
		<div class="bannerImg">
			<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  style="z-index: 1;"><img src="./images/1.jpg"></a>
			<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="./images/2.jpg"></a>
			<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="./images/3.jpg"></a>
			<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="./images/4.jpg"></a>
		</div>
		<!-- 下面小按鈕 -->
		<ul class="items">
			<li class="item" style="background: blue;"></li>
		</ul>
		<!-- 左右兩側按鈕 -->
		<ul class="items2">
			<li class="btn fl" id="left">&lt;</li>
			<li class="btn fr" id="right">&gt;</li>
		</ul>
	</div>
           

css部分 

<style type="text/css">
		*{
			padding: 0;
			margin:0;
			list-style: none;
		}
		#banner{
			width: 760px;
			height: 300px;
			margin: 0 auto;
			border:2px solid #009494;
			position: relative;
		}
		.bannerImg{
			width: 760px;
			height: 300px;
			position: relative;
		}
		.bannerImg a{
			display: block;
			position: absolute;
			top:0;
			left:0;
		}
		.items{
			width: 100px;
			height: 22px;
			position: absolute;
			z-index: 99;
			bottom: 20px;
			left:330px;
		}
		.items .item{
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			float: left;
			margin-right: 5px;
			border-radius: 50px;
			background: #fff;
		}
		.items2{
			width: 760px;
			height: 80px;
			position: absolute;
			top:50%;
			margin-top:-40px;
			z-index: 3;
		}
		.items2 .btn{
			width: 40px;
			height: 80px;
			background: rgba(0,0,0,0.5);
			text-align: center;
			line-height: 80px;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
	</style>
           

JS部分

<script type="text/javascript">
	var num = 0;
	var img = document.getElementsByTagName("a");//擷取a标簽
	var items = document.getElementsByClassName("items")[0];//擷取小圓點父元素ul
	var item = document.getElementsByClassName("item");//圖檔下的小圓點部分
	var banner = document.getElementById("banner");	//最外面的大盒子
	//根據圖檔多少，自動生成下面小按鈕
	function createLi(ul){
	for(var i = 0; i < img.length-1;i++){
		var li = document.createElement("li");
			li.className = "item"
			 ul.appendChild(li)
		}
	}
	createLi(items);
	//建立一個定時器
	var time = setInterval(function(){
		console.log(1)
		bannerAuto("r");
	},1000)
	//圖檔自動輪播部分，根據傳入的值判斷圖檔的移動方向
	function bannerAuto(address){
			if(address == 'r'){
			num++;
			if(num==img.length){
				num=0;
			}
		}else if(address == 'l'){
			num--;
			if(num<0){
				num = img.length-1;
			}
		}
		for(var i = 0; i < img.length;i++){
			img[i].style.zIndex = '0';
			item[i].style.background = '#fff';
		}
		img[num].style.zIndex = '1';
		item[num].style.background = 'blue';
	}
	for(var j = 0; j < item.length;j++){
		item[j].index = j;
		item[j].onmouseover = function(){
			for(var k = 0; k < img.length;k++){
				item[k].style.background = '#fff';
				img[k].style.zIndex = '0';
			}
			this.style.background = 'blue';
			img[this.index].style.zIndex = '1';
			//滑鼠移入哪一個按鈕，最後就講目前按鈕的索引，最後一定要指派給num，才能繼續輪播
			num = this.index
		}
	}
	//設定滑鼠移入，清除定時器，圖檔輪播停止
	banner.onmouseover = function(){
		clearInterval(time);
	}
	//滑鼠移出，輪播繼續，向右輪播
	banner.onmouseout = function(){
		time = setInterval(function(){
			bannerAuto("r")
		},1000);
	}
	//滑鼠的左右點選事件
	//傳入“l”是向左移動
	//傳入“r”是向右移動
	left.onclick = function(){
		bannerAuto("l")
	}
	right.onclick = function(){
		bannerAuto("r")
	}
</script>