轮播图的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
}
.slide-list {
position: relative;
width: 590px;
height: 470px;
margin: 100px auto;
overflow: hidden;
}
.slide-list .lunbotu {
position: absolute;
width: 2400px;
/* left: -590px; */
}
.slide-list .lunbotu li a {
display: block;
}
.slide-list .lunbotu li a img {
width: 590px;
height: 470px;
}
.slide-list .bef {
background-color: red;
position: absolute;
cursor: pointer;
left: 0;
top: 50%;
}
.slide-list .aft {
background-color: red;
position: absolute;
cursor: pointer;
right: 0;
top: 50%;
}
.slide-list .yuandian {
position: absolute;
bottom: 10px;
left: 20px;
}
.yuandian li {
border: 2px solid #ffffff;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #ffffff;
}
</style>
<div class="slide-list">
<ul class="lunbotu">
<li><a href="#"><img src="images/q.jpg" alt=""></a></li>
<li><a href="#"><img src="images/ac8d2aff9a2e4331.jpg.webp" alt=""></a></li>
<li><a href="#"><img src="images/8ffba6417f4c9068.jpg.webp" alt=""></a></li>
<li><a href="#"><img src="images/ac8d2aff9a2e4331.jpg.webp" alt=""></a></li>
</ul>
<div class="bef">《--</div>
<div class="aft">--》</div>
<ul class="yuandian">
</ul>
</div>
<script>
// 动态生成小圆圈
var flag = true;
var timer;
var num = 0
var bef = document.querySelector('.bef');
var aft = document.querySelector('.aft');
var lunbotu = document.querySelector('.lunbotu');
var lunbotu_list = document.querySelector('.lunbotu').querySelectorAll('li');
for(var i = 0; i < lunbotu_list.length; i++) {
let yuandian_li = document.createElement('li');
document.querySelector('.yuandian').appendChild(yuandian_li);
yuandian_li.index = i;
// 小圆点点击变色
var yuandian_list = document.querySelector('.yuandian').querySelectorAll('li');
yuandian_li.onclick = function() {
for(var j = 0; j < lunbotu_list.length; j++) {
yuandian_list[j].style.background = '#ffffff';
}
this.style.background = '#fc6308';
// animate函数实现点击小圆点 动画移动效果
animate(lunbotu,-590*this.index);
num = this.index;
}
}
yuandian_list[num].style.background = '#fc6308'
// 点击bef和aft后变换图片
bef.onclick = function() {
flag = false;
if(num>0) {
num--;
} else {
num = 0;
}
dianji();
}
aft.onclick = function() {
flag = false;
num++;
if(num == 4) {
lunbotu.style.left = 0 + 'px';
num = 0;
}
dianji();
}
function dianji() {
animate(lunbotu,-num*590)
for(var j = 0; j < lunbotu_list.length; j++) {
yuandian_list[j].style.background = '#ffffff';
}
yuandian_list[num].style.background = '#fc6308';
}
// animate函数动画移动
function animate(obj,juli) {
clearTimeout(obj.timer);
obj.timer = setInterval(() => {
// 核心算法（记住）
// if(juli < obj.offsetLeft) {
// obj.style.left = obj.offsetLeft - Math.ceil((obj.offsetLeft - juli)/5) + 'px';
// } else {
// obj.style.left = obj.offsetLeft - Math.floor((obj.offsetLeft - juli)/5) + 'px';
// }
var step = (juli - obj.offsetLeft)/5;
step = step>0 ? Math.ceil(step):Math.floor(step);
obj.style.left = obj.offsetLeft + step + 'px';
if(obj.offsetLeft == juli) {
clearTimeout(obj.timer);
}
}, 100);
}
// 自动播放图片
function time() {
timer = setInterval(() => {
aft.click(); // 手动点击事件 事件源:click()
}, 2000);
}
time()
// 党鼠标悬浮在盒子上时候，定时器停止
document.querySelector('.slide-list').onmouseenter = function() {
clearInterval(timer);
}
document.querySelector('.slide-list').onmouseleave = function() {
time();
}
</script>
</html
