HTML轮播图完整代码 (原生Javascript)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.indexes{
height: 20px;
display: flex;
position: absolute;
bottom: 10px;
}
.indexes li{
background: #fff;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 3px;
}
.indexes li.active{
background: blue;
}
.arrow{
width: 30px;
height: 50px;
background: deeppink;
position: absolute;
}
.arrow.arrow-left{
left: 180px;
}
.arrow.arrow-right{
right: 180px;
}
</style>
<body>
<div style="position: relative;align-items: center; display: flex; justify-content: center; margin: 100px auto;">
<div class="arrow arrow-left" onclick="prev()"></div>
<div class="arrow arrow-right" onclick="next()"></div>
<img id="demo1" src="http://p1.music.126.net/hnqSRbszgnc_MbQGdVr4TQ==/109951165173153454.jpg?imageView&quality=89">
<ul class="indexes">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
function next() {
index++
if(index === 4) index = 0
clearInterval(timer)
setStyle()
run()
}
function prev() {
index--
if(index === -1) index = 3
clearInterval(timer)
setStyle()
run()
}
let arr = [
"http://p1.music.126.net/hnqSRbszgnc_MbQGdVr4TQ==/109951165173153454.jpg?imageView&quality=89",
"http://p1.music.126.net/Du30OlKbv2x6w281-lDt-Q==/109951165172606426.jpg?imageView&quality=89",
"http://p1.music.126.net/NiybvzBGHBgo4Wuv8AH-Kw==/109951165173370457.jpg?imageView&quality=89",
"http://p1.music.126.net/vrnul_FolP2EbCZboVhcrQ==/109951165173292989.jpg?imageView&quality=89"
]
var demo1 = document.getElementById('demo1')
let indexes = document.getElementsByClassName('indexes')[0].children
let timer = -1
for (let i = 0; i < indexes.length; i++) {
indexes[i].onmouseenter = function () {
index = i
clearInterval(timer)
setStyle()
}
indexes[i].onmouseleave = function () {
run()
}
}
var index = 0
function run() {
timer = setInterval(() => {
index++
if(index === 4) index = 0
setStyle()
}, 1000);
}
function setStyle() {
demo1.src = arr[index]
let active = document.getElementsByClassName('active')[0]
active.classList.remove('active')
indexes[index].classList.add("active")
}
run()
</script>
</body>
</html>