原生JavaScript实现水平轮播图

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<script src="日常封装函数.js" type="text/javascript" charset="utf-8"></script>
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul,ol,li{
			list-style: none;
		}
		img{
			display: block;
		}
		#wrap{
			width: 1024px;
			height: 320px;
			border: 2px solid #0000FF;
			position: relative;
			margin: 80px auto;
			overflow: hidden;
		}
		#wrap #list{
			height: 320px;
			width: 600%;
			position: absolute;
		}
		#wrap #list li{
			float: left;
			width: 1024px;
			height: 320px;
		}
		#wrap #list li img{
			width: 1024px;
			height: 320px;
		}
		#wrap input{
			width: 70px;
			height: 80px;
			background: #000;
			color: #fff;
			font-weight: 500;
			border: 0;
			opacity: .5;
			position: absolute;
			top: 50%;
			cursor: pointer;
		}
		#wrap #prev{
			left: 0;
			margin-top: -40px;
		}
		#wrap #next{
			right: 0;
			margin-top: -40px;
		}
		#wrap #bar{
			position: absolute;
			bottom: 20px;
			left: 40%;
		}
		#wrap #bar li{
			margin: 0 10px;
			width: 20px;
			height: 20px;
			background: #fff;
			color: #000;
			border-radius: 10px;
			float: left;
			text-align: center;
			line-height: 20px;
			cursor: pointer;
		}
		#wrap #bar .hover,#wrap #bar li:hover{
			background: red;
			color: yellow;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<ul id="list">
			<li><img src="img01.jpg" alt="" /></li>
			<li><img src="img02.jpg" alt="" /></li>
			<li><img src="img03.jpg" alt="" /></li>
			<li><img src="img04.jpg" alt="" /></li>
			<li><img src="img05.jpg" alt="" /></li>
			<li><img src="img01.jpg" alt="" /></li>
		</ul>
		<input type="button" id="prev" value="上一张"/>
		<input type="button" id="next" value="下一张"/>
		<ol id="bar">
			<li class="hover">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ol>
	</div>
	
	<script type="text/javascript">
		var oList = document.getElementById("list");
		var oLi = oList.children;
		var oLiwidth = oLi[0].offsetWidth;
		var oBar = document.getElementById("bar");
		var aLi = oBar.children;
		var i = 0;
		//自动切换
		var timer = setInterval(function(){
			move();
		},3000);
		
		//控制移动函数
		function move(){
			i++;
			//最后一张
			if(i==oLi.length){
				oList.style.left = 0;
				i = 1;
			}
			//最前面一张
			if(i==-1){
				oList.style.left = -oLiwidth*(oLi.length-1)+"px";
				i = oLi.length-2;
			}
			
			//角标颜色随图片变化
			for(var j=0;j<aLi.length;j++){
				aLi[j].className = "";
			}
			//最后一张图片时
			if(i==oLi.length-1){
				aLi[0].className = "hover";
			}else{
				//正常情况下
				aLi[i].className = "hover";
			}			
			oList.style.left = animate(oList,{"left":-oLiwidth*i});
		}
		
		//上一张，下一张切换
		var oPrev = document.getElementById("prev");
		var oNext = document.getElementById("next");
		oPrev.onclick = function(){
			i-=2;
			move();
		}
		oNext.onclick = function(){
			move();
		}
		
		//角标划过切换图片
		for(let k=0;k<aLi.length;k++){
			aLi[k].onmouseover = function(){
				i=k-1;
				move();
			}
		}
		
		//鼠标在轮播图上划过则停止自动轮播，移出后重启自动轮播
		var oWrap = document.getElementById("wrap");
		oWrap.onmouseover = function(){
			clearInterval(timer);
		}
		oWrap.onmouseout = function(){
			timer = setInterval(function(){
				move();
			},3000)
		}
	</script>
</body>
</html>
原生JavaScript实现水平轮播图

猜你喜欢
