HTML+CSS+Javascript实现轮播图效果

注意：根据自己图片大小来更改轮播图大小。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
	margin: 0;
	padding: 0;
}
/*去掉ul、ol、li源有的样式*/
ul, ol, li {
	list-style: none;
}
/*设置图片样式为*/
img {
	width: 100%;
	height: 100%;
	display: block;    /*图片可见*/
}
/*设置最大div的样式*/
.banner {
	width: 50%;
	height: 60%;
	position: absolute;
	margin: 50px 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
/*设置ul的样式对齐方式为相对对齐*/
.banner>ul {
	width: 100%;
	height: 100%;
	position: relative;
}
/*设置装图片的li样式*/
.banner>ul>li {
	width: 100%;
	height: 100%;
	position: absolute;   /* 绝对对齐*/
	left: 0;
	top: 0;
	opacity: 0;     /*完全透明*/
	transition: opcity .5s linear;    /* 平滑过渡*/
}
/*当用户点击后释放鼠标后图片的li生效*/
.banner > ul > li.active {
	opacity: 1; /* 完全不透明*/
}
/*下方呈现的小按钮外围样式*/
.banner > ol {
	width: 200px;
	height: 60px;
	position: absolute;   /*绝对定位*/
	left: 50%;
	bottom: 50px;
	background-color: coral;
	opacity: 0.4;
	transform: translateX(-50%);      /*左边距减去自身的一半*/
	display: flex;                     /*水平排列*/
	justify-content: space-around;      /*水平两端对齐*/
	align-items: center;                /*垂直居中对齐 */
	border-radius: 80px;   /*圆角*/
}
/*下方小圆按钮的样式*/
.banner > ol > li {
	width: 20px;
	height: 20px;
	background-color: aliceblue;
	border-radius: 50%;    /*圆角50%*/
	cursor: pointer;	 /*鼠标移动到此处变成小手*/
}
/*点击小按钮后释放鼠标后li生效*/
.banner > ol > li.active {
	background-color: limegreen;
}
/*左右按钮*/
	
.banner>div {
	width: 100px;
	height: 150px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);   /*上边距减去自身高度的一半*/
	background-color: black;
	opacity: 0.4;               /* 透明度0.4*/
	display: flex;               /*摆脱文档流限制，相对定位*/
	justify-content: center;     /*内部元素和内容垂直居中*/
	align-items: center;         /*内部元素和内容水平居中*/
	font-size: 90px;             /*字体大小*/
	color: aliceblue;
}
/*左边按钮样式*/
.banner>div.left {
	left: 0;  /* 左对齐*/
	cursor: pointer;	 /*鼠标移动到此处变成小手*/
}
/*右边按钮样式*/
.banner>div.right {
	right: 0;               /* 右对齐*/
	cursor: pointer;	 /*鼠标移动到此处变成小手*/
}
</style>
</head>
<body>
<div class="banner">
  <ul class="imgBox">
    <li class="active"><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg"  alt=""></li>
    <li><img src="img/3.jpg"  alt=""></li>
    <li><img src="img/4.jpg"  alt=""></li>
  </ul>
  <ol><!--自定义属性                自定义属性-->
    <li data-i="0" class="active" data-c="pas"></li>
    <li data-i="1" data-c="pas"></li>
    <li data-i="2" data-c="pas"></li>
    <li data-i="3" data-c="pas"></li>
  </ol>            
  <div class="left">&lt;</div>   <!--&lt;代表"<"-->
  <div class="right">&gt;</div>  <!--&lt;代表">"-->
</div>
<script type="text/javascript">
		//获取所有图片的li和所有焦点的li
	var imgs=document.querySelectorAll("ul > li")
	var point=document.querySelectorAll("ol > li")
	//获取最大div的元素
	var banner=document.querySelector(".banner")
	
	//index表示第几张图片默认第0张显示
	 var index=0	
	
	 //隐藏当前这种图片，显示第index张图片方法
	    //true表示切换到下一张图片
	     //false表示切换到上一张图片
	function changeOne(type){
		//隐藏第index张图片
		imgs[index].className=''
		//隐藏第index个按钮高亮（绿色）
		point[index].className=''
		
		//判断传过来的值是否是true，是就切换下一张图片
		if(type===true){
		index++	 
			
       }else if(type===false){   //判断传过来的值是否是false，是就切换上一张图片
		   index--
	   }else{        //都不是说明点击是小圆点，就切换到type张图片
		   index=type         
	   }
		
		//判断index有没有越界，越了就从头开始或者从最后开始
		if(index>=imgs.length){
			index=0
		}
		if(index<0){
            index=imgs.length-1	
		 }
		
	 //为index张图片设置active属性
		//图片是透明度设置不透明，
	 imgs[index].className="active"  
		 //小圆点是设置高亮
	 point[index].className="active"
		
	}
		
		//单击判断调用changeOne(type)方法
		
	    banner.onclick=function(e){
			
		 //判断点击的是否是点击了左边的按钮
		if(e.target.className==="left"){
			changeOne(false)//如果是就调用方法，并传参false
		}
			
		 //判断点击的是否是点击了右边的按钮
		if(e.target.className==="right"){
			changeOne(true)  //如果是就调用方法，并传参true
		}
		//判断是否点击了小按钮（自定义属性判断，可以去看小圆点li里的（data-c））
		if(e.target.dataset.c==="pas"){
			//如果是再次通过自定义属性判断点击的哪一个小圆点，并把值传过去
			var i=e.target.dataset.i-0
			changeOne(i)
           }			
	  }
	
	//自动切换下一张图片方法
	  setInterval(function(){
	  changeOne(true)
	},5000)
		
	</script>
</body>
</html>
posted @ 2022-01-18 17:06 永恒之月TEL 阅读(91) 评论(0) 编辑收藏举报
刷新页面返回顶部
永恒之月TEL

HTML+CSS+Javascript实现轮播图效果

HTML+CSS+Javascript实现轮播图效果

公告
