使用原生js制作轮播图特效

 

轮播图是网页中很重要的一块的内容，今天用原生JS做一个轮播图特效，对于了解轮播图实现原理是很有帮助的

中间内容部分

<div id="banner">
		<!-- 图片 -->
		<div class="bannerImg">
			<a href="" style="z-index: 1;"><img src="./images/1.jpg"></a>
			<a href=""><img src="./images/2.jpg"></a>
			<a href=""><img src="./images/3.jpg"></a>
			<a href=""><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>