<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } #banber { border: #e74c3c 1px solid; margin: 100px; 800px; height: 480px; position: relative; overflow: hidden; } #banber span:last-child { left: 780px; } #banber span { background: #999999; font-size: 26px; color: #ffffff; 20px; height: 40px; opacity: 0.7; position: absolute; top: 220px; } #banber ul { 6000px; position: absolute; } #banber ul li { 800px; height: 480px; float: left; } #list { position: absolute; background-color: #cccccc; left: 580px; top: 420px; height: 10px; opacity: 0.7; padding: 2px 50px 2px 0px; } #list a { float: left; background-color: #f23d9c; border-radius: 50%; 10px; height: 10px; margin-left: 8px; } </style> <script src="animte.js"></script> </head> <body> <div id="banber"> <ul> <li><img src="images/CJD2.jpg" alt=""></li> <li><img src="images/CJD1.jpg" alt=""></li> <li><img src="images/CJD3.jpg" alt=""></li> <li><img src="images/CJD4.jpg" alt=""></li> <li><img src="images/CJD5.jpg" alt=""></li> </ul> <div id="arrol"> <span><</span> <span>> </span> </div> <div id="list"> </div> </div> <script> const banaer = document.getElementById('banber') const arrol = document.getElementById('arrol') const list = document.getElementById('list') let index = 0 //1,动态生成小圆球 //获取ul const b_ul = banaer.getElementsByTagName('ul')[0]; //获取LI的长度 const len = b_ul.getElementsByTagName('li').length for (let i = 0; i < len; i++) { let a = document.createElement('a') list.appendChild(a) a.onclick = Click //设置标签自定义属性--很重要 添加索引 a.setAttribute('index', i) } list.children[0].style.backgroundColor = '#ff8400' //点击 function Click() { for (let i = 0; i < list.children.length; i++) { let a = list.children[i] a.style.backgroundColor = '' this.style.backgroundColor = '#ff8400' // 获取自定义属性 点的是第几个 index = parseInt(this.getAttribute('index')) //调用动画 animte(b_ul, (-index) * 800) } } //箭头 arrol.children[0].onclick = function () { if (index == 0) { index = len; b_ul.style.left = -index * 800 + 'px'; } index--; list.children[index].click() } //无缝滚动 let firstLi = b_ul.children[0] let clone = firstLi.cloneNode(true) b_ul.appendChild(clone) arrol.children[1].onclick = function () { if (index === len) { b_ul.style.left = '0px'; index = 0 } index++; if (index < len) { list.children[index].click() } else { animte(b_ul, index * -800) for (let i = 0; i < list.children.length; i++) { let a = list.children[i] a.style.backgroundColor = '' } list.children[0].style.backgroundColor = '#ff8400' } } // 自动播放 let time=setInterval(function () { arrol.children[1].click() },3000) banaer.onmouseenter=function () { clearInterval(time) } banaer.onmouseleave=function () { time=setInterval(function () { arrol.children[1].click() },3000) } </script> </body> </html>
今天写了无缝轮播滚动 虽然代码有许许多多的不规范,不过对思维的一个锻炼 前面知识的复习,对于初学者也是很不错