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"><</div> <!--<代表"<"-->
<div class="right">></div> <!--<代表">"-->
</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>
