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

直播系统源代码，点击滚动的轮播图自动跳转到相应页
一、实现点击事件

// 先获取三个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)
}

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