制作banner左右切换按钮
<!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>banner</title>
<style>
/* 设置初始 padding和margin*/
* {
margin: 0;
padding: 0;
}
/* banner区域 */
.banner {
width: 100%;
/* 溢出隐藏 */
overflow: hidden;
/* translateX中的百分数表示相对于它本身宽度的多少倍 */
/* transform: translateX(-20%); */
position: relative;
}
/* ul */
.list {
list-style: none;
width: 500%;
transition: transform .5s ease 0s;
}
.list li {
float: left;
width: 20%;
}
.list li img {
width: 100%;
/* height: 750px; */
vertical-align: middle;
}
/* 按钮 */
a {
color: black;
display: inline-block;
text-decoration: none;
width: 60px;
height: 60px;
line-height: 60px;
top: 50%;
margin-top: -30px;
text-align: center;
background-color: white;
position: absolute;
opacity: 0.4;
border-radius: 30px;
}
.banner>.left_btn {
left: 0px;
}
.banner>.right_btn {
right: 0px;
}
/* 小圆点 */
.banner .circles {
width: 130px;
height: 20px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -65px;
list-style: none;
}
.banner .circles li {
float: left;
width: 20px;
height: 20px;
background-color: rgb(0, 140, 255);
margin-right: 10px;
border-radius: 10px;
transition: all .5s ease 0s;
cursor: pointer;
}
.banner .circles .current {
width: 40px;
background-color: rgb(0, 113, 219);
}
.banner>.circles li:last-child {
margin-right: 0px;
}
</style>
</head>
<body>
<div id="root" class="banner">
<ul id="list" class="list">
<!-- 轮播的banner -->
<li><img src="jz1.jpg" alt=""></li>
<li><img src="jz2.jpg" alt=""></li>
<li><img src="jz3.jpg" alt=""></li>
</ul>
<ol class="circles" id="circles_ol">
<!-- 小圆点-->
<li data-n="0" class="current"></li>
<li data-n="1"></li>
<li data-n="2"></li>
</ol>
<a href="javascript:;" class="left_btn" id="left_btn"><</a>
<a href="javascript:;" class="right_btn" id="right_btn">></a>
</div>
</body>
<script>
const root = document.getElementById('root');
const left_btn = document.getElementById('left_btn');
const right_btn = document.getElementById('right_btn');
const list = document.getElementById('list');
const circles_ol = document.getElementById('circles_ol');
const circles_li = circles_ol.getElementsByTagName('li');
// 克隆第一个li
const clone_list = list.firstElementChild.cloneNode(true);
list.appendChild(clone_list);
var idx = 0;
//设置函数节流
var lock = true;
// 右按钮
right_btn.onclick = right_btn_handler;
//有按钮的事件处理函数
function right_btn_handler() {
//点击右按钮判断节流锁状态
if (!lock) return;
// 关锁
lock = false;
// 加上过渡
list.style.transition = 'transform .5s ease 0s';
idx++;
list.style.transform = 'translateX(' + -20 * idx + '%)';
//判断当前图片是否时最后一张，是则就瞬间变为第一张
if (idx > 2) {
setTimeout(() => {
//去掉过度
list.style.transition = 'none'
// 删除transform属性
list.style.transform = 'none'
idx = 0;
}, 500);
}
//设置小圆点
rds();
//开锁
setTimeout(() => {
lock = true;
}, 500);
};
// 左按钮
left_btn.onclick = function() {
//点击左按钮判断节流锁状态
if (!lock) return;
// 关锁
lock = false;
if (idx == 0) {
//去掉过度
list.style.transition = 'none'
//当此时为第一张图时，瞬间变为最后一张图
list.style.transform = 'translateX(' + -20 * 4 + '%)';
idx = 3;
// 让瞬间移动过后，再把过渡加上
setTimeout(() => {
// 加上过渡
list.style.transition = 'transform .5s ease 0s';
//动画
list.style.transform = 'translateX(' + -20 * 3 + '%)';
}, 0);
} else {
idx--;
list.style.transform = 'translateX(' + -20 * idx + '%)';
}
//设置小圆点
rds();
//开锁
setTimeout(() => {
lock = true;
}, 500);
};
//遍历小圆点，当li上的data-n属性的序号等于idx时，给这个li加上类名current
const rds = () => {
// 遍历ol里面的li，序号为idx的小圆点才会有类名
for (var i = 0; i < 3; i++) {
if (i == idx % 3) {
circles_li[i].className = 'current';
} else {
circles_li[i].className = '';
}
}
};
// 监听小圆点，事件委托
circles_ol.onclick = function(e) {
// 得到li身上的data-n编号
var n = Number(e.target.getAttribute('data-n'));
//改变idx的值
idx = n;
// 点击小圆点进行拉动
list.style.transform = 'translateX(' + -20 * idx + '%)';
//点击小圆点调用函数
rds();
}
//设置定时器，自动轮播banner
var timer = setInterval(() => {
right_btn_handler();
}, 2000);
//鼠标进入轮播图，停止自动轮播
root.onmouseenter = function() {
// 清除定时器
clearInterval(timer);
};
//鼠标离开轮播图，停止自动轮播
root.onmouseleave = function() {
// 设表先关
clearInterval(timer);
// 设置定时器，这里不需要加var
timer = setInterval(() => {
right_btn_handler();
}, 1500);
}
//给按钮添加事件
//鼠标进入时，按钮透明度为0.8
left_btn.onmouseenter = function() {
left_btn.style.opacity = '0.8';
};
right_btn.onmouseenter = function() {
right_btn.style.opacity = '0.8';
};
//鼠标离开时，按钮透明度变回0.2
left_btn.onmouseleave = function() {
left_btn.style.opacity = '0.2';
};
right_btn.onmouseleave = function() {
right_btn.style.opacity = '0.2';
}
</script>
</html>
