時間：2023-09-27 16:12:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-27 16:12:01 來源：網(wǎng)站運(yùn)營
web 完整輪播圖：可直接訪問頁面查看效果：http://is666a.gitee.io/web_complete_rotation_chart/
在線咨詢
HTML + CSS + JS var carousel = document.getElementById("carousel");var btn = document.getElementById("btn");var contentCarousel = document.getElementsByClassName("content")[0];var focusPoint = document.getElementById('focus');var leftFocus = document.getElementById('left');var rightFocus = document.getElementById('right');var imageWidth, pic = 0, btnNum = 0;var timer = null;// 初始化頁面function init() { // 初始化 carousel for (var i = 0; i < 11; i++) { var li = document.createElement("li"); var img = document.createElement("img"); img.setAttribute("src", "./images/tu" + (i + 1) + ".jpg") li.appendChild(img); carousel.appendChild(li); } // 將第一張圖片 clone 到最后 var firstLi = carousel.firstChild.cloneNode(true); carousel.appendChild(firstLi); // 初始化 btn for (var i = 0; i < carousel.children.length - 1; i++) { var li = document.createElement("li"); li.innerHTML = i + 1; btn.appendChild(li); } btn.children[0].className = 'current'; imageWidth = carousel.children[1].offsetLeft;}// 按鈕隨鼠標(biāo)改變function btnChange() { for (var i = 0; i < btn.children.length; i++) { btn.children[i].index = i; btn.children[i].onmouseover = function () { for (var j = 0; j < btn.children.length; j++) { btn.children[j].className = ''; } pic = this.index; btnNum = this.index; this.className = 'current'; var target = - pic * imageWidth; animate(carousel, target); } }}// 控制左右焦點(diǎn)的出現(xiàn)消失function focusControl() { contentCarousel.onmouseenter = function () { focusPoint.style.display = "block"; clearInterval(timer); } contentCarousel.onmouseleave = function () { focusPoint.style.display = "none"; timer = setInterval(rightFocus.onclick, 2000) } // 左焦點(diǎn)點(diǎn)擊事件 leftFocus.onclick = function () { if (pic <= 0) { pic = carousel.children.length - 1; carousel.style.left = -(carousel.children.length - 1)*imageWidth + 'px'; } pic--; var target = - pic * imageWidth; animate(carousel, target); btnNum--; if (btnNum < 0) btnNum = carousel.children.length - 2; for (var j = 0; j < btn.children.length; j++) { btn.children[j].className = ''; } btn.children[btnNum].className = 'current' } // 右焦點(diǎn)點(diǎn)擊事件 rightFocus.onclick = function () { if (pic >= carousel.children.length - 1) { pic = 0; carousel.style.left = 0; } pic++; var target = - pic * imageWidth; animate(carousel, target); for (var j = 0; j < btn.children.length; j++) { btn.children[j].className = ''; } btnNum++; if (btnNum >= carousel.children.length - 1){ btnNum = 0; } btn.children[btnNum].className = 'current' } // 設(shè)置定時器用于自動播放 timer = setInterval(rightFocus.onclick, 2000);}// 動畫效果function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var leader = obj.offsetLeft; var step = 30; step = leader < target ? step : -step; if (Math.abs(leader - target) >= Math.abs(step)) { leader += step; obj.style.left = leader + 'px'; } else { obj.style.left = target + 'px'; clearInterval(obj.timer); } }, 15)}init()btnChange()focusControl()關(guān)鍵詞：完整
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
