直播带货源码，通过js实现轮播图的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.box {
position: relative;
width: 800px;
height: 300px;
margin: 100px auto;
}
/* 轮播主体 */
nav a {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 300px;
}
nav img {
width: 100%;
height: 100%;
}
nav a:first-child {
z-index: 1;
}
/* 左右按钮 */
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
z-index: 1;
cursor: pointer;
z-index: 999;
}
.prev {
left: 0;
}
.next {
right: 0;
}
/* 小圆点 */
.circle {
display: flex;
position: absolute;
left: 50%;
bottom: 2px;
transform: translateX(-50%);
z-index: 999;
}
.circle li {
width: 10px;
height: 10px;
background-color: skyblue;
border-radius: 50%;
margin: 10px;
cursor: pointer;
}
.active {
background-color: pink !important;
}
</style>
</head>
<body>
<div>
<!-- 轮播图 -->
<nav>
<a href="javascript:;" data-id="0" style="display: block;"><img src="../images/1.webp" alt=""></a>
<a href="javascript:;" data-id="1"><img src="../images/2.webp" alt=""></a>
<a href="javascript:;" data-id="2"><img src="../images/3.webp" alt=""></a>
<!-- 左右按钮 -->
<div><</div>
<div>></div>
</nav>
<!-- 小圆点 -->
<ul>
<li data-id="0"></li>
<li data-id="1"></li>
<li data-id="2"></li>
</ul>
</div>
<script>
const box = document.querySelector('.box')
const nav = document.querySelector('nav')
const as = document.querySelectorAll('nav a')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
const circle = document.querySelector('.circle')
// 获取显示的轮播图
function showId() {
let id = +document.querySelector("nav>a[style='display: block;']").dataset.id
return id
}
// 利用事件委托,实现小圆点功能
circle.addEventListener('click', function (e) {
if (e.target.nodeName === 'LI') {
// 排他，给小圆点添加active样式
document.querySelector('.active').classList.remove('active')
e.target.classList.add('active')
as.forEach(item => item.style.display = 'none')
nav.children[e.target.dataset.id].style.display = 'block'
}
})
// 左按钮功能
prev.addEventListener('click', function () {
const id = showId()
as.forEach(item => item.style.display = 'none')
document.querySelector('.active').classList.remove('active')
if (id <= 0) {
as[as.length - 1].style.display = 'block'
circle.children[as.length - 1].classList.add('active')
} else {
as[id - 1].style.display = 'block'
circle.children[id - 1].classList.add('active')
}
})
// 右按钮功能
next.addEventListener('click', function () {
const id = showId()
as.forEach(item => item.style.display = 'none')
document.querySelector('.active').classList.remove('active')
if (id >= as.length - 1) {
as[0].style.display = 'block'
circle.children[0].classList.add('active')
} else {
as[id + 1].style.display = 'block'
circle.children[id + 1].classList.add('active')
}
})
// 自动轮播功能
let timer = setInterval(() => {
next.click()
}, 1000)
// 鼠标经过，暂停轮播
box.addEventListener('mouseenter', function () {
clearInterval(timer)
})
// 鼠标离开，继续轮播
box.addEventListener('mouseleave', function () {
timer = setInterval(() => {
next.click()
}, 1000)
})
</script>
</body>
</html>
以上就是 直播带货源码，通过js实现轮播图的效果，更多内容欢迎关注之后的文章
标签：style,轮播,display,js,直播,active,circle,document,id From： https://www.cnblogs.com/yunbaomengnan/p/16759665.html