原声js 轮播图动态添加低栏+淡入淡出

最新推荐文章于 2021-06-11 15:05:19 发布

心郎

最新推荐文章于 2021-06-11 15:05:19 发布

阅读量462

点赞数

本文链接：https://blog.csdn.net/u011301203/article/details/72871625

版权

本文介绍了如何使用原生JavaScript创建一个具备动态添加低栏和淡入淡出效果的轮播图。通过纯JS实现图片切换、底部栏跟随以及平滑过渡效果，为网页增添动态视觉体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
						
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.slider{
				position: absolute;
				left: 50%;
				margin-left: -271px;
				border: 1px solid #000;
			}
			.slider-img>img{
				height: 300px;
				width: 540px;
			}
			
			/*--------------轮播图图片-------------------*/
			
			.slider-block{
				height: 300px;
				width: 540px;
				border: 1px solid #000;
			}
			.slider-img{
				position: absolute;
				opacity: 0;
			}
			.active{
				/*display: block;*/
			}
			
			
			/*---------------图片按钮-------------------*/
			.direction>img{
				height: 44px;
				width: 21px;
				position: absolute;
				top: 50%;
				margin-top: -21px;
				opacity: 0.2;
			}
			.direction>img:nth-child(1){
				left: 30px;
			}
			.direction>img:nth-child(2){
				right: 30px;
			}
			
			
			/*---------------- 底部图片数量标识-----------------*/
			.status-position{
				position: absolute;
				bottom: 6px;
				left: 50%;
				margin-left: -48px;
				padding:0px 6px;
				color: white;
				display: flex;
				position: absolute;
				border-radius: 24px;
				background-color: darkgrey;
			}
			.status-position>span{
				background-color: black;
				text-align: center;
				border-radius: 50%;
				width: 15px;
				height: 15px;
				line-height: 15px;
				font-size: 9px;
				color: white;
				margin: 0 3px;
				flex:1;
				opacity: 0.4;
			}
			.spanActive{
				color: red !important;
				background-color: black !important;
				opacity: 1 !important;
			}

		</style>
	</head>
	<body>
		
		<div class="slider">
		
			<div class="slider-block">
				<div class="slider-img" style="opacity: 1;"><img src="img/zls.jpg" /></div>
				<div class="slider-img"><img src="img/dm.jpg" /></div>
				<div class="slider-img"><img src="img/dt.jpg" /></div>
				<div class="slider-img"><img src="img/hb.jpg" /></div>
				<div class="slider-img"><img src="img/jks.jpg" /></div>
				<div class="slider-img"><img src="img/nq.jpg" /></div>
				<div class="slider-img"><img src="img/nt.jpg" /></div>
				<div class="slider-img"><img src="img/wq.jpg" /></div>
				<div class="slider-img"><img src="img/ys.jpg" /></div>
			</div>
			
			<div class="direction">
				<img src="img/img-left.png"  id="img-left"/>
				<img src="img/img-right.png"   id="img-right" />
			</div>
			
			<span class="status-position"> </span>
			
		</div>
		
		
		
		
		
		<script>
			
			
			var slider = document.getElementsByClassName('slider')[0];// 轮播图盒子
			var imgLeft = document.getElementById('img-left'); 		// 左边按钮
			var imgRight = document.getElementById('img-right');	// 右边按钮
			var directionArr = document.getElementsByClassName('direction')[0].children; //所有左右按钮数组
			var sliderImgArr = document.getElementsByClassName('slider-img'); //获取所有图片
			var statusPosition =  document.getElementsByClassName('status-position')[0];
			
			
			var imgStatus = 0; //图片状态标识 从0开始
			
			
			
			
			//动态创建 轮播图低栏数字状态 有几张图片就有几个标识
			var strSpan = "";
			for( var k=1; k<sliderImgArr.length+1; k++ ){
				if(k==1){
					strSpan+='<span class="spanActive">'+k+'</span>';
				}else{
					strSpan+='<span>'+k+'</span>';
				}
			}
			statusPosition.innerHTML =strSpan;
			//让低栏居中 -(总宽度/2) = span*num+margin*num+左右padding 
			statusPosition.style.marginLeft = "-"+((sliderImgArr.length*15+1*sliderImgArr.length +4)/2)+"px";
			
			
			
			
			
			//给slider 添加移入 移除事件 
			slider.onmouseover = function(){
				imgLeft.style.cssText = "opacity: 1;transition-duration:1s;-webkit-transition-duration: 1s;";		
				imgRight.style.cssText = "opacity: 1;transition-duration:1s;-webkit-transition-duration: 1s;";		
			}
			slider.onmouseleave = function(){
				imgLeft.style.cssText = "opacity: 0.2;transition-duration:1s;-webkit-transition-duration: 1s;";	
				imgRight.style.cssText = "opacity: 0.2;transition-duration:1s;-webkit-transition-duration: 1s;";	
			}
			
			
			//判断有多少图片 添加多少状态标识
			var imgNum = document.getElementsByClassName('slider-block')[0].children.length;
			
			
			//左右按钮添加点击事件
			directionArr[0].onclick = function(){
				if(imgStatus==0){ //点击向左 如果当前图片为第一张 需要跳转最后一张
					imgStatus=sliderImgArr.length-1;
				}else{
					imgStatus--; //修改imgStatus位置状态
				}
				updateImg();
				updateSpan();
			}
			directionArr[1].onclick = function(){
				if( (sliderImgArr.length-1) == imgStatus ){ //点击向右 如果当前图片为最后一张 需要跳转第一张
					imgStatus=0;
				}else{
					imgStatus++; //修改imgStatus位置状态
				}
				updateImg();
				updateSpan();
			}
			//图片切换
			function updateImg(){
				//不显示所有图片
				for( var i=0; i<sliderImgArr.length; i++ ){
					sliderImgArr[i].style.opacity = '0';
				}
				//显示当前图片  sliderImgArr[imgStatus]
				sliderImgArr[imgStatus].style.cssText = "opacity:1;transition-duration:2s";
			}
			//图标切换
			var statusNum = statusPosition.children;
			console.log(statusNum);
			function updateSpan(){
				//不显示所有图片
				for( var i=0; i<sliderImgArr.length; i++ ){
					statusNum[i].classList.remove("spanActive");
					statusNum[i].style.opacity = '0.2';
					statusNum[i].style.cssText = 'opacity:0.2;color:white;';
				}
				console.log(imgStatus);
				//显示当前图片  sliderImgArr[imgStatus]
//				statusNum[imgStatus].className = 'spanActive';
				statusNum[imgStatus].style.cssText = "opacity:1;transition-duration:3s;color:red";
			}
			
			
			
			
			
			
		</script>
		
		
		
	</body>
</html>