<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body>div {
width: 1000px;
height: 358px;
margin: 0 auto;
}
div>div {
transform: translatey(280px);
font-size: 50px;
color: white;
font-weight: bold;
}
p {
display: flex;
justify-content: space-between;
padding: 0 30px;
transform: translatey(65px);
}
.tubiao1 {
display: inline-block;
background-image: url('./123.png');
width: 49px;
height: 49px;
/* background-position: 0 -49px; */
}
.tubiao2 {
display: inline-block;
background-image: url('./123.png');
width: 49px;
height: 49px;
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<div>
<div>
<span>·</span>
<span>·</span>
<span>·</span>
<span>·</span>
</div>
<p>
<i class="tubiao1" id='1'></i>
<i class="tubiao2" id='2'></i>
</p>
</div>
<script>
let div = document.querySelector('body>div');
let i = 0;
let arr = ['./shutter_1.jpg', './shutter_2.jpg', './shutter_3.jpg', './shutter_4.jpg'];
let discArr = document.querySelectorAll('span'); // 圆点节点
let locnLeft = document.getElementById('1');
let locnRight = document.getElementById('2');
locnLeft.onmouseover = function () {
locnLeft.style.backgroundPosition = '0 -49px';
}
locnLeft.onmouseout = function () {
locnLeft.style.backgroundPosition = '0 0';
}
locnRight.onmouseover = function () {
locnRight.style.backgroundPosition = '0 -49px';
}
locnRight.onmouseout = function () {
locnRight.style.backgroundPosition = '0 0';
}
// 左边按键
locnLeft.onclick = function () {
i--;
i--;
if (i <= -1) {
i = arr.length - 1;
}
for (let item of discArr) {
item.style.color = 'white';
}
discArr[i].style.color = 'gray'
div.style.backgroundImage = `url(${arr[i]})`;
div.style.textAlign = 'center'
i++;
}
// 右边按键
locnRight.onclick = function () {
changeImg();
}
// 计时器鼠标移入和移出效果
let lunboFn = () => {
let lunbo = setInterval(function () {
changeImg();
}, 1000)
div.onmouseover = function () {
clearInterval(lunbo);
}
div.onmouseout = function () {
lunboFn();
}
}
// 圆点控制背景图
for (let j = 0; j < discArr.length; j++) {
discArr[j].onmouseover = function () {
div.style.backgroundImage = `url(${arr[j]})`;
for (let item of discArr) {
item.style.color = 'white';
}
discArr[j].style.color = 'gray'
}
}
// 背景图 圆点颜色切换
let changeImg = () => {
console.log(i);
if (i >= arr.length) {
i = arr.length - 1;
}
for (let item of discArr) {
item.style.color = 'white';
}
discArr[i].style.color = 'gray'
div.style.backgroundImage = `url(${arr[i]})`;
div.style.textAlign = 'center'
i++;
if (i >= arr.length) {
i = 0;
}
return i;
}
lunboFn();
</script>
</body>
</html>
