<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1743249_ztjw8b0gkyr.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.main {
width: 1080px;
height: 420px;
margin: 50px auto;
position: relative;
/* border: 1px solid red; */
}
.main .banner li {
display: none;
}
.main .banner li.on {
display: block;
}
.main .points {
/* height: 15px; */
/* background-color: red; */
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
display: flex;
}
.main .points li {
width: 15px;
height: 15px;
background-color:
margin: 0 10px;
cursor: pointer;
}
.main .points li.active {
background-color: orangered;
}
.main .btn {
width: 50px;
height: 100px;
background-color: rgba(0, 0, 0, .5);
position: absolute;
font-size: 35px;
color:
line-height: 100px;
text-align: center;
cursor: pointer;
}
.main .prev {
left: -60px;
top: 50%;
transform: translate(0, -50%);
z-index: 10;
}
.main .next {
right: -60px;
top: 50%;
transform: translate(0, -50%);
z-index: 10;
}
</style>
</head>
<body>
<div class="main">
<ul class="banner">
<li class="on">
<img src="http://p1.music.126.net/uYEZk0fBieAsIU2jV7z_Tg==/109951165097321887.jpg?imageView&quality=89"
alt="">
</li>
<li>
<img src="http://p1.music.126.net/-4tGAaB03yhVr53UTUbTHg==/109951165097407752.jpg?imageView&quality=89"
alt="">
</li>
<li>
<img src="http://p1.music.126.net/UbZ8uE01SIY-Jmo8c3fGEQ==/109951165097027317.jpg?imageView&quality=89"
alt="">
</li>
<li>
<img src="http://p1.music.126.net/f40GhB5MtgDaw9Qqq8ZY1A==/109951165097466001.jpg?imageView&quality=89"
alt="">
</li>
<li>
<img src="http://p1.music.126.net/U4aWX25bkqj1A4bKHaeNAQ==/109951165097467733.jpg?imageView&quality=89"
alt="">
</li>
</ul>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="btn next iconfont iconxiayige"></div>
<div class="btn prev iconfont iconshangyige"></div>
</div>
<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 start() {
timer = setInterval(() => {
if (++i > 4) i = 0;
$(".main ul li").eq(i).show().siblings().hide();
$(".points li").eq(i).addClass("active").siblings(".active").removeClass("active");
}, 2000);
}
start();
$(".points li").click(function () {
clearInterval(timer);
i = $(this).index();
$(".banner li").eq(i).show().siblings().hide();
$(".points li").eq(i).addClass("active").siblings(".active").removeClass("active");
start();
})
$(".next").click(function () {
if (++i > 4) i = 0;
clearInterval(timer);
// i = $(this).index();
$(".banner li").eq(i).show().siblings().hide();
$(".points li").eq(i).addClass("active").siblings(".active").removeClass("active");
start();
})
$(".prev").click(function () {
if (--i < 0) i = 4;
clearInterval(timer);
// i = $(this).index();
$(".banner li").eq(i).show().siblings().hide();
$(".points li").eq(i).addClass("active").siblings(".active").removeClass("active");
start();
})
})
</script>
</body>
</html>
