直播系统源代码，点击滚动的轮播图自动跳转到相应页

直播系统源代码，点击滚动的轮播图自动跳转到相应页

一、实现点击事件

// 先获取三个element
const parentScroll = document.querySelector(".over");
const childScroll = document.querySelectorAll(".item");
const lineScroll = document.querySelector(".line");
// 定义控制滚动下标
var itemIndex = 0;
// 单项点击事件
function itemClick(index) {
// 临界值处理
if (index == -1) {
itemIndex = itemNum - 1
} else if (index == itemNum) {
itemIndex = 0
} else {
itemIndex = index
}
// 控制下划线和整体滚动
scrollCheck(itemIndex)
}
// 上一项点击事件
function preClick() {
itemClick(--itemIndex)
}
// 下一项点击事件
function nextClick() {
itemClick(++itemIndex)
}
// 控制下划线滚动函数
function scrollLine(left) {
lineScroll.style.left = left + 'px'
}
// 控制下划线和整体滚动函数
function scrollCheck(index) {
let parentLeft = parentScroll.scrollLeft; // 获取父元素滚动条位置,用于设置整体滚动
let parentWidth = parentScroll.clientWidth / 2; // 获取父元素可视区域中间值,用于比较
let childLeft = childScroll[index].offsetLeft; // 获取子元素距父元素左侧距离,用于设置下划线位置
let childScrollWidth = childScroll[index].offsetLeft + childScroll[index].clientWidth / 2; // 获取每一项中间值距父元素左侧距离,用于比较
// 如果当前项的中间值距父元素左侧距离,比父元素可视区域中间值,小,那么整体不滚动
// 反之,将横向滚动element.scrollLeft的值设置为当前项的中间值距父元素左侧距离,形成滚动
if (childScrollWidth < parentWidth) {
parentScroll.scrollTo({
left: 0,
behavior: "smooth"
})
} else {
parentScroll.scrollTo({
left: childScrollWidth - parentWidth + childScroll[index].clientWidth / 2,
behavior: "smooth"
})
}
// 控制下划线滚动
scrollLine(childLeft)
}

​

二、实现自动轮播

var timer = null;
function autoPlay() {
timer = setInterval(() => {
nextClick()
}, 2000)
}

以上就是 直播系统源代码，点击滚动的轮播图自动跳转到相应页，更多内容欢迎关注之后的文章

标签：function,index,滚动,轮播,点击,跳转,源代码,itemIndex,下划线
来源： https://www.cnblogs.com/yunbaomengnan/p/16385583.html