JS实现图片轮播

最新推荐文章于 2021-05-01 14:32:25 发布

小白style

最新推荐文章于 2021-05-01 14:32:25 发布

阅读量228

点赞数

分类专栏： JavaSctipt

本文链接：https://blog.csdn.net/weixin_43076899/article/details/82692879

版权

JavaSctipt 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		#container{width: 520px;height: 280px;margin: 50px auto;position: relative;}
		#content div{display: none;}
		#content div.current{display: block;}
		#a1{position: absolute;top: 50%;margin-top: -16px;width: 100%; }
		#a1 div{display: none;}
		#a1 .arrow{background: rgba(0,0,0,0.3);}
		#a1 .arrow:hover{cursor: pointer;}
		#a1 .arrow-left{float: left;}
		#a1 .arrow-right{float: right;}
		ol ,li{list-style: none;}
		#cus{position: absolute;bottom: 15px;left: 50%;margin-left: -26px;width: 90px;
			background: rgba(255,255,255,0.7);height: 15px;text-align: center;line-height: 15px;
			border-radius: 15px;}
		#cus li{float: left;width: 10px;height: 10px;border: 1px solid gray;border-radius: 50%;
			margin-right: 6px;margin-top: 2px;}
		#cus li:first-child{margin-left: 15px;}
		#cus li:hover{cursor: pointer;}
		#cus li.sel{background: orange;border-color: orange;}
	</style>
</head>
<body>
	<div id="container">
		<!-- 轮播图 -->
		<div id="content">
			<div class="current"><img src="img/01.jpg" alt=""></div>
			<div><img src="img/02.jpg" alt=""></div>
			<div><img src="img/03.jpg" alt=""></div>
			<div><img src="img/04.jpg" alt=""></div>
		</div>
		<!-- 指示器 -->
		<ol id="cus">
			<li class="sel"></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
		<!-- 箭头 -->
		<div id="a1">
			<div class="arrow arrow-left"><img src="img/arrow-left.png" alt=""></div>
			<div class="arrow arrow-right"><img src="img/arrow-right.png" alt=""></div>
		</div>
	</div>
	<script type="text/javascript">
		var o=document.getElementById('container');//轮播区
		var ds=document.getElementById('content').getElementsByTagName('div');
		var arrows=document.getElementsByClassName('arrow');
		var lis=document.getElementById('cus').getElementsByTagName('li');

		var index=0;//保存当前图片的索引
		var len=ds.length;//图片的个数
		var time;//定时器名字

		time=setInterval(move,1000);//启动定时器，开始轮播
		//鼠标经过时，停止轮播
		o.onmouseover=function(){
			clearInterval(time);
			arrows[0].style.display='block';
			arrows[1].style.display='block';
		};
		//箭头控制图片
		//左箭头
		arrows[0].onclick=function(){
			moveUp();
		};
		//右箭头
		arrows[1].onclick=function(){
			move();
		};

		//指示器点击事件
		for(var i=0;i<lis.length;i++){
			lis[i].index1=i;//遍历时为每一个li新增属性index1,并且赋值
			lis[i].onclick=function(){
				lis[index].className='';//当前显示的指示器样式清空
				ds[index].className='';//当前显示的轮播图，不显示
				this.className='sel';//修改被点击的指示器
				ds[this.index1].className='current';//指示器被选中时对应的轮播图显示
				index=this.index1;//修改index1
			};
		};

		//鼠标离开时，继续轮播
		o.onmouseout=function(){
			time=setInterval(move,1000);
		};
		//开始切换下一张图片
		function move(){
			//当前显示的图片，停止显示
			ds[index].className='';
			lis[index].className='';
			index++;//索引递增
			if (index==len) {
				index=0;//图片为最后一张时，替换为第一张
			}
			ds[index].className='current';
			lis[index].className='sel';
		};
		//切换为上一张图片
		function moveUp(){
			//当前显示的图片，停止显示
			ds[index].className='';
			lis[index].className='';
			console.log(index);
			index--;//索引递减
			if (index==-1) {
				index=len-1;//图片为第一张时，替换为最后一张
			}
			ds[index].className='current';//显示上一张
			lis[index].className='sel';
		}
	</script>
</body>
</html>