转义字符
< 在html里用<代替
>在html里用>代替
设置两个按钮在两边
#goPre {
left: 0px;
}
#goNext {
right: 0px;
}
轮播原理,谁的z-index最大谁在最上面
所以给按钮z-index100
给列表元素z-index10:
.item.active {
z-index: 10;
}
谁有active谁就在最上面
goNextBtn.addEventListener('click',function(){})监听事件:当鼠标执行目标对象的点击操作时就调用addEventListener里的函数
写列表的时候记得:list-style :none;
padding-left:0;
border-radius :100%代表圆形
原本:
加上
float: left;
margin-right: 10px;
变成:
设置样式为:
.point {
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 100%;
float: left;
margin-right: 14px;
border-style: solid;
border-width: 2px;
border-color: rgba(255, 255, 255, 0.6);
}
得到索引点:
设置变白:
.point.active {
background-color: rgba(255, 255, 255, 0.8);
}注意这个地方.point.active 写法是连在一起的
效果:
this 代指此对象
this.getAttribute指获取此对象的属性值
完整:淡入淡出以及通过索引点对应图片的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.wrap {
width: 800px;
height: 400px;
position: relative;
}
.list {
width: 800px;
height: 400px;
list-style: none;
position: relative;
padding-left: 0;
}
.item {
width: 100%;
height: 100%;
color: white;
font-size: 50px;
position: absolute;
opacity: 0;
transition: all .5s;
}
.item:nth-child(1) {
background-color: black;
}
.item:nth-child(2) {
background-color: aqua;
}
.item:nth-child(3) {
background-color: rebeccapurple;
}
.item:nth-child(4) {
background-color: yellow;
}
.item:nth-child(5) {
background-color: burlywood;
}
.btn {
width: 50px;
height: 100px;
position: absolute;
top: 150px;
z-index: 100;
}
#goPre {
left: 0px;
}
#goNext {
right: 0px;
}
.item.active {
z-index: 10;
opacity: 1;
}
.pointList {
padding-left: 0px;
list-style: none;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 100;
}
.point {
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 100%;
float: left;
margin-right: 14px;
border-style: solid;
border-width: 2px;
border-color: rgba(255, 255, 255, 0.6);
cursor: pointer;
}
.point.active {
background-color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
<ul class="pointList">
<li class="point" 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>
<button type="button" class="btn" id="goPre">
< </button>
<button type="button" class="btn" id="goNext">></button>
</div>
<script type="text/javascript">
var items = document.getElementsByClassName('item')
var points = document.getElementsByClassName('point')
var goPreBtn = document.getElementById('goPre')
var goNextBtn = document.getElementById('goNext')
var index = 0 //表示第N张图片会拥有active这个类名
var clearActive = function () {
//清除其他item的active,保证每次只有一个z-index最大
for (var i = 0; i < items.length; i++) {
points[i].className = 'point'
items[i].className = 'item';
}
}
var goIndex = function () {
//表示index等于多少,就让这个li拥有active类名
clearActive();
points[index].className = 'point active';
items[index].className = 'item active';
}
var goPre = function () {
//实现自动上一张
if (index == 0) {
index = 4;
} else {
index--;
}
goIndex();
}
var goNext = function () {
//实现自动下一张
if (index < 4) {
index++;
} else {
index = 0;
}
goIndex();
}
goNextBtn.addEventListener('click', function () {
goNext();
})
goPreBtn.addEventListener('click', function () {
goPre();
})
for (var i = 0; i < points.length; i++) {
points[i].addEventListener('click',function () {
var pointIndex = this.getAttribute('data-index');
console.log(pointIndex);
index = pointIndex;
goIndex();
})
}
</script>
</body>
</html>