轮播图具体功能:
-
点击前后按钮跳转
-
点击右下角点进行图片跳转
-
自动轮播
<!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">
* {
padding: 0;
margin: 0;
}
.wrap {
width: 800px;
height: 400px;
position: relative;
}
.list {
width: 800px;
height: 400px;
list-style: none;
position: relative;
}
.item {
width: 100%;
height: 100%;
font-size: 50px;
/* 相对于父级元素定位,若父级元素没有进行过定位,则按照浏览器窗口定位 */
position: absolute;
/* 实现淡出效果 */
opacity: 0;
transition: all .8s;
}
.item:nth-child(1) {
background-color: pink;
}
.item:nth-child(2) {
background-color: skyblue;
}
.item:nth-child(3) {
background-color: greenyellow;
}
.item:nth-child(4) {
background-color: gray;
}
.item:nth-child(5) {
background-color: orange;
}
.btn {
width: 50px;
height: 100px;
position: absolute;
top: 150px;
z-index: 100;
}
/* 绝对定位,相对于父级元素定位 */
#goPre {
left: 0px;
}
#goNext {
right: 0;
}
.item.active {
/* 完全可见 */
opacity: 1;
z-index: 10;
}
.pointList{
list-style: none;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 1000;
}
.point{
width: 8px;
height: 8px;
background-color: rgba(0,0,0,0.4);
border-radius: 100%;
float: left;
margin-right:15px;
border-style: solid;
border-width:2px;
border-color:rgba(255,255,255,0.6);
/* 光标呈现为指示链接的指针 */
cursor: poniter
}
.point.active{
background-color:rgba(255,255,255,0.2)
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li class="item active">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">
<!-- data-index 在标签里面存数据 -->
<li class="point active" 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')
// 根据id获取按钮
var goPreBtn = document.getElementById('goPre')
var goNextBtn = document.getElementById('goNext')
// 根据类名获取当前展示图片点
var points=document.getElementsByClassName('point')
// index表示第几张图片在展示,第index张图片有active类名
var index = 0
// 定时器 图片自动跳转参数
var time=0;
// 类名中删去active属性
var clearActive = function () {
// 图片
for (var i = 0; i < items.length; i++) {
items[i].className = 'item'
}
// 点
for (var i = 0; i < points.length; i++) {
points[i].className = 'point'
}
}
// 改变类名,添加active属性,实现第 index 张图片显示
var goIndex = function () {
// 先去掉所有图片类名中的 active
clearActive();
// 把第index张图片添加active类名
items[index].className = 'item active';
// 把第index张图片点添加active类名
points[index].className = 'point active';
}
// 图片序号 +1 ,调用类名转换函数
var goNext = function () {
// index 限制在 0——4,不会溢出
if (index < 4) {
index++;
} else {
index = 0;
}
// 为需要显示的图片添加 active 属性
goIndex();
}
var goPre = function () {
if (index == 0) {
index = 4;
} else {
index--;
}
goIndex();
}
// 实现效果:点击前后按钮实现跳转
// 为下一张图片 button 元素添加点击事件
goNextBtn.addEventListener('click', function () {
// 调用函数跳转到下一张图片
goNext()
})
// 为上一张图片 button 元素添加点击事件
goPreBtn.addEventListener('click', function () {
// 调用函数跳转到上一张图片
goPre()
})
// 实现效果:点击跳转
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
// getAttribute() 方法返回指定属性名的属性值
var pointIndex=this.getAttribute('data-index');
console.log(pointIndex);
// 把所点击点的序号传给 index
index=pointIndex;
// 实现图片跳转
goIndex();
// 每当点击点时,time 置0,重新计数
time=0;
})
}
// 实现效果:自动轮播 2s一次
setInterval(function(){
time++;
if(time==20){
goNext();
time=0;
}
},100)
</script>
</body>
</html>
前端小白,如发现错误,欢迎指正。