运行效果如下图:
CSS部分:
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
width: 1100px;
margin: 20px auto;
}
.container li {
display: none;
}
.container li:first-of-type {
display: block;
}
.main {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
display: flex;
position: absolute;
bottom: 30px;
width: 200px;
height: 20px;
}
.nav li {
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
margin: 0 10px;
}
.nav li.active {
background: rgba(102, 102, 102, 0.5);
}
.arrow {
width: 40px;
height: 80px;
position: absolute;
background: rgba(48, 41, 41, 0.3);
line-height: 80px;
text-align: center;
font-size: 30px;
color: rgba(252, 252, 252, 0.8);
cursor: pointer;
user-select: none;
}
.arrow.arrowleft {
left: 150px;
}
.arrow.arrowright {
right: 170px;
}
</style>
html部分:
<div class="main">
<div class="arrow arrowleft"><</div>
<div class="arrow arrowright">></div>
<ul class="container">
<li>
<img src="http://p1.music.126.net/uYEZk0fBieAsIU2jV7z_Tg==/109951165097321887.jpg?imageView&quality=89"
alt="">
</li>
<li>
<img src="http://p1.music.126.net/w9_4EDtBaLAsg8E3k11Rkw==/109951165097376119.jpg?imageView&quality=89"
alt="">
</li>
<li>
<img src="http://p1.music.126.net/2rqzxg-DP-7Rt3Ak_l7Uog==/109951165097437479.jpg?imageView&quality=89"
alt="">
</li>
<li>
<img src="http://p1.music.126.net/f40GhB5MtgDaw9Qqq8ZY1A==/109951165097466001.jpg?imageView&quality=89"
alt="">
</li>
</ul>
<ul class="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
js部分:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
let i = 0;
let timer = null
function run() {
timer = setInterval(() => {
if (++i === 4) i = 0
$(".container li").eq(i).show().siblings().hide()
$(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
}, 1000)
}
run()
$(".arrowleft").click(function () {
clearInterval(timer)
i--
if (i < 0) i = 3
$(".container li").eq(i).show().siblings().hide()
$(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
run()
})
$(".arrowright").click(function () {
clearInterval(timer)
i++
if (i > 3) i = 0
$(".container li").eq(i).show().siblings().hide()
$(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
run()
})
$(".nav li").click(function () {
clearInterval(timer)
i = $(this).index()
$(".container li").eq(i).show().siblings().hide()
$(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
run()
})
})
</script>