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

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

一、实现点击事件

 

1

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

​

二、实现自动轮播

 

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

 

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