html页面代码：此页面将大体的排版先做完。为后续编写js代码打下基础。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } #banner { width: 800px; height: 400px; background-color: aquamarine; margin: 10px auto; position: relative; } #banner .pic_box { width: calc(100%*4); /* 动态生成宽度，直接生成多少倍，之后宽度需要通过JavaScript动态计算宽度 */ height: 100%; background-color: blanchedalmond; position: absolute; top: 0px; left: 0px; } #banner .pic_box li { width: 800px; height: 400px; line-height: 400px; text-align: center; font-size: 50px; float: left; } .cir { width: auto; height: 40px; /* background-color: brown; */ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .cir li { width: 20px; height: 20px; border-radius: 50%; background-color: blanchedalmond; float: left; text-align: center; margin: 0px 5px; color: rgb(17, 18, 18); } .cir li.active { background-color: cadetblue; } .left { width: 50px; height: 50px; line-height: 50px; background-color: aliceblue; position: absolute; left: 0px; top: 50%; display: none; transform: translateY(-50%); } .right { width: 50px; height: 50px; line-height: 50px; background-color: aliceblue; position: absolute; right: 0px; top: 50%; display: none; transform: translateY(-50%); } </style> </head> <body> <div id="banner"> <ul class="pic_box"> <!-- 图片区 --> <li style="background-color: blue;">0</li> <li style="background-color: rgb(64, 64, 127);">1</li> <li style="background-color: rgb(234, 255, 0);">2</li> <li style="background-color: rgb(221, 0, 255);">3</li> </ul> <ol class="cir"> <!-- 指示器 --> <!-- <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> --> </ol> <!-- 左右箭头 --> <span class="left">向左</span> <span class="right">向右</span> </div> <!-- 引入封装动画的js --> <script src="./animate.js"></script> <script src="./轮播.js"></script> </body> </html>
需要引入之前写好的动画的js代码和另外引入一个js页面用来编写轮播效果 。注意:先引入animate.js文件再引入轮播.js。
animate.js代码：
//封装一下 // obj 对象 target 目标位置 callback回调函数 -可选 function animate(obj,target,callback){ clearInterval(obj.timer);//防止定时器累加 或来回拉扯的过程 obj.timer= setInterval(function () { // 获得小球当前的位置 var l=obj.offsetLeft; var speed=(target-l)/10; speed= speed>0? Math.ceil(speed):Math.floor(speed) if(obj.offsetLeft==target){ clearInterval(obj.timer); callback&&callback(); } //让小球 改变位置 obj.style.left=l+speed+'px' }, 25) }
轮播,js代码：
var btnl = document.querySelector('.left'); var btnr = document.querySelector('.right'); var banner = document.querySelector('#banner'); var pic_box = document.querySelector('.pic_box'); var cir = document.querySelector('.cir'); var picli = document.querySelectorAll('.pic_box>li'); var cli = document.querySelectorAll('.cir>li'); console.log(btnl, btnr, banner, pic_box, cir); var liw = picli[0].offsetWidth; var timer = null; var flag = true; //用一个标识来当节流阀。 //1.鼠标经过移开，按钮隐藏 banner.onmouseenter = function () { btnl.style.display = 'block'; btnr.style.display = 'block'; clearInterval(timer) } banner.onmouseleave = function () { btnl.style.display = 'none'; btnr.style.display = 'none'; timer = setInterval(function () { btnr.onclick(); }, 2500) } // 功能三：小圆点 for (let i = 0; i < picli.length; i++) { var li = document.createElement('li'); li.innerHTML = i; cir.appendChild(li); li.onclick = function () { for (let j = 0; j < cir.children.length; j++) { cir.children[j].className = ''; } index = i; num = i; cir.children[i].className = 'active'; animate(pic_box, -liw * i) } } cir.children[0].className = 'active'; // 功能二：点击向右的箭头，图片向左移动 //计算li的大小 // var coneLi = picli[0].cloneNode(true); pic_box.appendChild(coneLi); //追加克隆的节点 picli = document.querySelectorAll('.pic_box>li'); console.log(picli.length); pic_box.style.width = liw * picli.length + 'px'; var index = 0; var num = 0; // 记录图片的索引号 btnr.onclick = function () { if (flag) { flag = false; if (index == picli.length - 1) { index = 0; pic_box.style.left = '0'; } index++; animate(pic_box, -liw * index, function () { flag = true; }) // 4. num++; if (num == picli.length - 1) { num = 0; } circhange(num) } // pic_box.style.left =index* -800 + 'px'; } btnl.onclick = function () { if (flag) { flag = false; if (index == 0) { index = picli.length - 1; pic_box.style.left = -index * liw + 'px' } index--; animate(pic_box, -liw * index, function () { flag = true; }) if (num == 0) { num = picli.length - 1; } num--; circhange(num); } } // 功能四：单击向右，小圆点变换。 // 封装一个函数出来 function circhange(num) { for (let j = 0; j < cir.children.length; j++) { cir.children[j].className = ''; } cir.children[num].className = 'active'; } // 自动轮播功能 timer = setInterval(function () { btnr.onclick(); }, 2500) // 解决bug 单击按钮图片刷新过快。 // 搞一个节流阀出来（节流和防抖的作用） // 一张图片没有走完之前，不能点击第二次。 // var flag = true;
