基于JavaScript实现页面轮播图渐变效果的示例代码

<div class="focus ">
			<ul class="carousel">				                       
				<li class="opa"><a href=""><img src=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/08/1E/CoNB_WU2Z10Pona2ACzRRnW5ARY.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
				<li><a href=""><img src=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/92/FF/CoNB_GUzmHJqChXuACW_FtT4Ioo.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
				<li><a href=""><img src=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" https://p1-q.mafengwo.net/s19/M00/70/34/CoNFT2Uzk0xJFMtNACnheGMnxbw.png?imageView2%2F2%2Fw%2F1920%2Fq%2F90%2Fformat%2Fjpeg" alt=""></a></li>
            </ul>
			<div class="arrowLeft">&lt;</div>  <!-- 左侧按钮 -->
			<div class="arrowRight">&gt;</div> <!-- 右侧按钮 -->
			<ol class="disc"> 
			</ol>
		</div>

.focus {
	position: relative;
	width: 100%;
	height: 500px;
	margin-top: 0px;
	overflow: hidden;
    
}


.carousel {
	position: relative;
    top: 0px;
	width: 100%;
    height: 100%;
	left: 0px;
    bottom: 0px;
}

.carousel li {
	position: absolute;  /*绝对定位*/
	top: 0px;
	left: 0px;
	opacity: 0;
	transition: all 1s;  /*设置切换时过渡效果*/
}

.carousel li.opa {  /*li和.opa之间,无空格*/
	opacity: 1;
}

.carousel li img {
    width: 100%;
	height: auto; /*高度自适应*/ /*height: 100%; */ /*高度设为100%会超出容器高度*/
 object-fit: cover; /*图片自适应大小并保持原比例*/
}

.focus div {
	display: none;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%); 	/*上移，使垂直居中*/
	width: 36px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	font-size: 36px;
	z-index: 99;
	cursor: pointer; /*鼠标指针变为手型*/ 
}

.arrowLeft {
	left: 10px;
}

.arrowRight {
	right: 10px;
}
.arrowLeft:hover,.arrowRight:hover {
	background-color: rgba(128, 128, 128, .5);
}
.disc {
	position:  absolute;
	bottom: 0px;
	right: 50%;
	z-index: 99;
}
.disc li {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: #ccc;
	margin: 0 3px;
	border-radius: 50%;
	cursor: pointer;
}

.disc li.current {  /*li和.current之间,无空格*/
	background-color: #f00;

}

}  

window.addEventListener('load', function () {
	var focus = document.querySelector('.focus');
	var arrowLeft = document.querySelector('.arrowLeft');
	var arrowRight = document.querySelector('.arrowRight');
	//鼠标移动到轮播图，左右箭头显示
	focus.addEventListener('mouseover', function() {
		arrowLeft.style.display = 'block';
		arrowRight.style.display = 'block';
		clearInterval(timer); //清除定时器
		timer = null;
	})
	focus.addEventListener('mouseout', function() {
		arrowLeft.style.display = 'none';
		arrowRight.style.display = 'none';
		timer = setInterval(function() { //鼠标离开，开启定时器
			arrowRight.click();
		}, 3000);
	})

	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('ol');
	var num=ul.children.length;
	var disc = 0;
//动态生成小圆点
	for (let i = 0; i < num; i++) {
		var li = document.createElement('li');
		ol.appendChild(li);
		li.addEventListener('click', function() {
			for (let k = 0; k < num; k++) {
				ol.children[k].className = '';
				ul.children[k].className = '';
			}
			this.className = 'current';
			ul.children[i].className = 'opa';
			disc = i;
		})
	}
  ol.children[0].className ='current';
	
	//点击右侧箭头
	arrowRight.addEventListener('click', function() {
		disc++; //圆点样式
		if (disc == num) {
			disc = 0;
		}
		for (let k = 0; k < num; k++) {
			ol.children[k].className = '';
			ul.children[k].className = '';
		}
		ol.children[disc].className = 'current';
		ul.children[disc].className = 'opa';
	})
	// 点击左侧按钮
	arrowLeft.addEventListener('click', function() {
		disc--;
		if (disc < 0) {
			disc = num - 1;
		}
		for (let k = 0; k < num; k++) {
			ol.children[k].className = '';
			ul.children[k].className = '';
		}
		ol.children[disc].className = 'current';
		ul.children[disc].className = 'opa';
	})
	//自动播放，像点击右侧按钮
	var timer = setInterval(function() {
		arrowRight.click();
	}, 3000);
})