原生js写一个简单的轮播图_原生写一个轮播图-CSDN博客

本文链接：https://blog.csdn.net/weixin_43734545/article/details/103509387
原生js写一个简单的轮播图

很适合我们这样的前端小白
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			.wrap{
				width: 800px;
				height: 400px;
				position: relative;
				margin: 0 auto;
			}
			.list{
				width: 800px;
				height: 400px;
				list-style: none;
				position: relative;
				padding-left: 0;
			}
			.item{
				opacity: 0;
				transition: all 1s;/*动画效果*/ 
				height: 100%;
				widows: 100%;
				color: white;
				font-size: 50px;
				position: absolute;
			}
			.item:nth-child(1){
				width: 100%;
				background-color: red;
			}
			.item:nth-child(2){
				width: 100%;
				background-color: lightyellow;
			}
			.item:nth-child(3){
				width: 100%;
				background-color: blue;
			}
			.item:nth-child(4){
				width: 100%;
				background-color: green;
			}
			.item:nth-child(5){
				width: 100%;
				background-color: gold;
			}
			/* 按钮的样式 */
			.btn{
				width: 50px;
				height: 50px;
				position: absolute;
				border: none;/*去掉边框*/
				outline:0 none;/*去掉按钮选中边框*/
				top: 50%;
				transform: translateY(-50%);/*垂直居中*/
				z-index: 999;
				opacity: 0.4;/*透明度*/
				cursor: pointer;/*变手指*/
				border-radius: 100%;/*变园*/
			}
			.btn span{
				font-size: 30px;
			}
			#goPre{
				left: 5px;
			}
			#goNecex{
				right: 5px;
			}
			.item.active{
				opacity: 1;
				z-index: 666;
			}
			
			/*点的样式*/
			.pointList{
				padding-left: 0px;
				list-style: none;
				position: absolute;
				right: 20px;
				bottom: 20px;
				z-index: 777;
			}
			.point{
				width: 10px;
				height: 10px;
				background-color: rgba(0,0,0,0.4);
				border-radius: 100%;/*变园*/
				float: left;
				margin-right: 20px;				
				border-style: solid;/*圈圈*/
				border-width: 2px;
				border-color: #f1f1f1;				
				cursor: pointer;/*变手指*/
			}
			.point.active{
				background-color: #f1f1f1;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul class="list" id="wrap">
				<li class="item active">1</li>
				<li class="item">2</li>
				<li class="item">3</li>
				<li class="item">4</li>
				<li class="item">5</li>
			</ul>
			<button type="buttom" class="btn" id="goPre"><span>
					<</span> </button> <button type="buttom" class="btn" id="goNecex"><span>></span></button>
			<!--写五个点-->
			<ul class="pointList">
				<li class="point active" data-index='0'></li>
				<li class="point" data-index='1'></li>
				<li class="point" data-index='2'></li>
				<li class="point" data-index='3'></li>
				<li class="point" data-index='4'></li>
			</ul>
		</div>
		<script type="text/javascript">
			//第一步，获取item列表和两个按钮和点
			var items = document.getElementsByClassName('item'); //图片
			var points = document.getElementsByClassName('point'); //点点
			var goPreyou = document.getElementById('goPre');
			var goNextzuo = document.getElementById('goNecex');
			//第二步，制定一个索引----表示第几张图片的展示
			var index = 0; //下标从零开始
			//第三步，function一个函数，for循环重新赋值列表类名 = item
			var qingChuliebiaolei = function() {
				for (var i = 0; i < items.length; i++) { //这句for循环是重新赋值列表类名 = item，防止列表类名都等于item active
					items[i].className = 'item'; //图片
				}
				for (var i = 0; i < points.length; i++) { //这句for循环是重新赋值列表类名 = point，防止列表类名都等于point active
					points[i].className = 'point' //点点
				}
			}
			//第四步，function一个函数，控制列表的类名是item active
			var goIndex = function() {
				qingChuliebiaolei();
				points[index].className = 'point active'; //点点
				items[index].className = 'item active'; //图片
			}
			//第五步，function一个函数，判断index不能超过列表本身的数，否则index = 0，让列表自动++
			var goNext = function() { //右点击
				if (index < 4) {
					index++;
				} else {
					index = 0;
				}
				goIndex();
			}
			var goPre = function() { //左点击
				if (index == 0) {
					index = 4;
				} else {
					index--;
				}
				goIndex();
			}
			//第六步，添加一个匿名函数点击事件（委托事件），每一次点击都触发第五步的函数
			goNextzuo.addEventListener('click', function() { //向右点击
				goNext();
				tiem = 0; //属于第七步，
			})
			goPreyou.addEventListener('click', function() { //向左点击
				goPre();
				tiem = 0; //属于第七步，
			})
			//第七步，给每个点挂上点击事件，循环出每个点，在进行点击事件
			for (var i = 0; i < points.length; i++) {
				points[i].addEventListener('click', function() {
					//如何知道我们点击点之后对应相对应的图片切换？在点点的列表中我们加入了一个标签属性：data-index = ' ' 进行存储
					var pointIndex = this.getAttribute('data-index'); //getAttribute获取对象属性
					index = pointIndex;
					goIndex();
					time = 0; //属于第七步，点击时间回复到0，重新计时
				})
			}

			//第七步，定时器----3秒跳转一次(20*150)
			var tiem = 0; //定时器参数
			function tiemr() {
				play = setInterval(function() {
					tiem++;
					if (tiem == 20) {
						goNext();
						tiem = 0;
					}
				}, 150)
			}
			tiemr();
			//鼠标移入
			var wrap = document.getElementById("wrap"); //获取ul的id，进行鼠标移入移出的停止与播放
			wrap.onmouseover = function() {
				// console.log('鼠标移入停止');
				clearInterval(play);
			}
			//鼠标移出
			wrap.onmouseout = function() {
				// console.log('鼠标移出，启动计时器');
				tiemr();
			}
		</script>
	</body>
</html>