直播系統原始碼，點選滾動的輪播圖自動跳轉到相應頁

直播系統原始碼，點選滾動的輪播圖自動跳轉到相應頁

一、實現點選事件

// 先獲取三個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)
}

以上就是 直播系統原始碼，點選滾動的輪播圖自動跳轉到相應頁，更多內容歡迎關注之後的文章