<
<div class="right-arrow"><span> > </span></div> </div> <!-- 底部圆点 --> <div class="dots"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="txt">第1张图片</div> </div> <script> (function () { //获取要操作的dome 节点 let ul = document.getElementsByClassName(‘imgList‘)[0]; let liList = ul.getElementsByTagName("li"); // let liList = document.getElementsByTagName(‘li‘) let dots = document.getElementsByClassName(‘dots‘)[0].getElementsByTagName(‘span‘) let arrowLeft = document.getElementsByClassName(‘left-arrow‘)[0] let arrowRight = document.getElementsByClassName(‘right-arrow‘)[0] let swipterBox = document.getElementsByClassName(‘swipter‘)[0] let txt = document.getElementsByClassName(‘txt‘)[0] //定义一个索引值 记录 当前是第几张图片 默认为0 第一张 let indexActive = 0; // 每次移动的距离 let move = `transform:translateX(0px)` //es6 新增 数组语法 将伪数组 转换为数组 dots = Array.from(dots) //底部圆点点击 dots.forEach((value, index) => { value.onclick = function () { //赋值索引 indexActive = index //执行轮播方法 swipterMoveFn() } }) // 右箭头点击 arrowRight.onclick = () => { indexActive += 1 //判断是否是最后一张图片 if (indexActive >= liList.length) { indexActive = 0 } //执行轮播方法 swipterMoveFn() } //左箭头点击 arrowLeft.onclick = () => { indexActive -= 1 //判断是否是第一张图片 if (indexActive < 0) { indexActive = liList.length - 1 } //执行轮播方法 swipterMoveFn() } //负责执行轮播的方法 function swipterMoveFn() { //每一次点击 清楚所有 dots 的 class dots.forEach(value => { value.className = ‘ ‘ }) txt.innerHTML = `第${indexActive+1}张图片` dots[indexActive].className = "active" //添加移动 move 距离 当前索引 * 当前元素宽度 = 移动的距离 move = `transform:translateX(${indexActive * -600}px)` //给ul 添加 style ul.style = move } // 自动轮播 设置没 1.5秒执行一次 let timing = setInterval(swipterTiming, 1500) //自动轮播方法 function swipterTiming() { indexActive += 1 //判断是否是最后一张图片 if (indexActive >= liList.length - 1) { indexActive = 0 } //调用 轮播图方法 swipterMoveFn() } //鼠标移入时 清除定时器 swipterBox.onmouseover = () => { clearInterval(timing) } //鼠标移出 设置定时器 swipterBox.onmouseleave = () => { timing = setInterval(swipterTiming, 1500) } })() </script>
© 著作权归作者所有
举报
发表评论
0/200