原生JavaScript实现竖直轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="日常封装函数.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul li,ol li{
				list-style: none;
			}
			#wrap{
				width: 1024px;
				height: 320px;
				border: 1px solid #000;
				margin: 100px auto;
				position: relative;
				overflow: hidden;
			}
			#wrap #list{
				height: 320px;
				position: absolute;
			}
			#wrap #list li{
				width: 1024px;
				height: 320px;
			}
			#wrap #list li img{
				width: 1024px;
				height: 320px;
				display: block;
			}
			#wrap #prev{
				width: 80px;
				height: 50px;
				font-size: 12px;
				position: absolute;
				top: 0;
				background: #fff;
				opacity: .5;
				border: 0;
			}
			#wrap #next{
				width: 80px;
				height:50px;
				font-size: 12px;
				position: absolute;
				bottom: 0;
				background: #fff;
				opacity: .5;
				border: 0;
			}
			#wrap #bar{
				position: absolute;
				bottom: 15px;
				left: 400px;
			}
			#wrap #bar li{
				width: 20px;
				height: 20px;
				border-radius: 10px;
				background: blue;
				margin-left: 20px;
				float: left;
				text-align: center;
				line-height: 20px;
				color: #fff;
				cursor: pointer;
			}
			
			#wrap #bar .hover,#wrap #bar li:hover{
				background: #fff;
				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 oLiheight = oLi[0].offsetHeight;
			var oBar = document.getElementById("bar");
			var aLi = oBar.children;
			var i = 0;
			var timer = setInterval(function(){
				move();
			},3000);
			
			function move(){
				i++;
				//当图片达到最后一张后，i值在增大，就让整个ul瞬间移回到初始位置，由于第一张与最后一张图片一样，这样瞬间回去肉眼无法察觉，并让显示第二张，这样达到轮回的效果
				if(i==oLi.length){
					oList.style.top = 0;
					i = 1;
				}
				//当图片达到最前面一张后，i在减小，就让整个ul瞬间向后移动到末尾图片位置，利用与之前一样的原理达到轮回效果
				if(i==-1){
					oList.style.top = -oLiheight*(oLi.length-1)+"px";
					i = oLi.length-2;
				}
				//让所有的角标都没有hover效果
				for(var j=0;j<aLi.length;j++){
					aLi[j].className = "";
				}
				//给当前的i值对应的角标添加hover效果，而当图片达到最后一张时，由于第一张和最后一张一样，于是就让角标的第一个添加hover效果
				if(i==oLi.length-1){
					aLi[0].className = "hover";
				}else{
					aLi[i].className = "hover";
				}
				//图片列表的向上移动距离等于图片的索引值乘以单张图片高度
				oList.style.top = animate(oList,{"top":-oLiheight*i});
			}
			
			var oPrev = document.getElementById("prev");
			var oNext = document.getElementById("next");
			oPrev.onclick = function(){
				//当点击上一张时，由于要执行move函数，在move中i++了，要达到上一张效果，于是就得i-2
				i-=2;
				move();
			}
			oNext.onclick = function(){
				move();
			}
			
			//鼠标移入轮播图区域停止自动切换图片，移出后再次启动切换
			var oWrap = document.getElementById("wrap");
			oWrap.onmouseover = function(){
				clearInterval(timer);
			}
			oWrap.onmouseout = function(){
				timer = setInterval(function(){
					move();
				},3000);
			}
			
			//角标鼠标滑动事件
			for(let k = 0;k<aLi.length;k++){
				//给每个角标添加划过事件，图片多一张，因此i=k-1
				aLi[k].onmouseover = function(){
					i = k-1;
					move();
				}
			}
		</script>
	</body>
</html>
原生JavaScript实现竖直轮播图

猜你喜欢
