今天又是一个非常实用的案例哟，听名字就觉得高级很难对吧，今天就来写一个案例，让你轻松学到轮播图的精髓！！
?还是老规矩，来看一下实现效果！！
学习轮播图的首先是要把图片准备好，并且用 ul 的里面的 li 包起来，给 li 一个浮动，让他们显示在一行上，但是注意了，一定要给 ul 足够的宽哦！！
来吧，html 和 css 代码如下所示（文件名：index.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="animate.js"></script> <script src="轮播图.js"></script> <style> body { background-color: rgb(151, 147, 147); } * { margin: 0; padding: 0; } div { overflow: hidden; position: relative; width: 500px; height: 500px; background-color: skyblue; margin: 20px auto; } ul { list-style: none; } .img { width: 600%; position: absolute; left: 0; } li { float: left; } img { width: 500px; height: 500px; } .yuan>li { cursor: pointer; width: 10px; height: 10px; background-color: rgb(190, 185, 185); border-radius: 50%; margin: 0 5px; border: 1px solid rgb(119, 114, 114); } .yuan { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .yuan .color { background-color: rgb(228, 135, 135); } a { text-decoration: none; color: black; background-color: rgb(112, 111, 111); display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; top: 50%; transform: translateY(-50%); display: none; } .left { left: 0; } .right { right: 0; } </style> </head> <body> <div class="box"> <ul class="img"> <li><img src="images/1.webp" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.webp" alt=""></li> <li><img src="images/4.webp" alt=""></li> <li><img src="images/5.webp" alt=""></li> </ul> <a href="JavaScript:;" class="left"><</a> <a href="JavaScript:;" class="right">></a> <ul class="yuan"></ul> </div> </body> </html>这样写好以后，一个基本的样子就算是有了。
接下来就是让他动起来，想想什么可以让图片动起来，是不是我们学过的动画效果呀，所有这个地方要用缓动动画来实现一个切换图片的效果，因为 js 代码较多，所以得新建一个 js 文件，把代码封装起来！
下面就是封装得 js 代码 （文件名：轮播图.js）
window.addEventListener('load', function () { var img = document.querySelector('.img'); var yuan = document.querySelector('.yuan'); var box = document.querySelector('.box'); var left = document.querySelector('.left'); var right = document.querySelector('.right'); var imgwidth = box.offsetWidth; //获取盒子的宽度（图片的宽度） // 经过鼠标触发 停止自动滚动图片效果 box.addEventListener('mouseenter', function () { left.style.display = 'block'; right.style.display = 'block'; clearInterval(timer); }) // 离开鼠标触发 自动滚动图片再次触发 box.addEventListener('mouseleave', function () { left.style.display = 'none'; right.style.display = 'none'; timer = setInterval(function () { right.click(); }, 2000) }) // 根据图片添加下面的小圆点 for (var i = 0; i < img.children.length; i++) { var li = document.createElement('li'); yuan.appendChild(li); li.setAttribute('date-index', i); li.addEventListener('click', function () { for (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } this.className = 'color'; var index = this.getAttribute('date-index'); var imgwidth = box.offsetWidth; // animate(obj,target,function(){}) animate(img, -index * imgwidth); nums = index; colors = index; }) } // 默认第一个小圆点有颜色 yuan.children[0].className = 'color'; var nums = 0; var colors = 0; // 复制第一张图片到最后,给无缝滚动做准备 var li = img.children[0].cloneNode(true); img.appendChild(li); var flag = true; //右边按钮,切换下一张,小圆点一起变化 right.addEventListener('click', function () { if (flag) { flag = false; if (nums == img.children.length - 1) { nums = 0; img.style.left = 0; } nums++; animate(img, -nums * imgwidth, function () { flag = true; }); colors++; if (colors == yuan.children.length) { colors = 0; } for (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } yuan.children[colors].className = 'color'; } }) // 左边按钮,切换下一张,小圆点一起变化 left.addEventListener('click', function () { if (flag) { flag = false; if (nums == 0) { nums = img.children.length - 1; img.style.left = -nums * imgwidth + 'px'; } nums--; colors--; animate(img, -nums * imgwidth, function () { flag = true; }); if (colors < 0) { colors = yuan.children.length - 1; } // if (colors == 0) { // colors = yuan.children.length; // } // colors--; for (var j = 0; j < yuan.children.length; j++) { yuan.children[j].className = ''; } yuan.children[colors].className = 'color'; } }) // 鼠标不经过图片实现自动滚动 var timer = setInterval(function () { right.click(); }, 2000) })关键的来了，要让动起来怎么少得了动画效果呢，我单独封装了一个 js 文件，这样以后写其他案例的时候也可以直接引用了。
代码如下（文件名：animate.js）
function animate(obj, target, callback) { //移动的对象(谁移动)，移动的目的位置，回调函数 // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { // 步长写到定时器里面 var step = (target - obj.offsetLeft) / 10; //步长公式：(目标位置-现在的位置)/10 step = step > 0 ? Math.ceil(step) : Math.floor(step); //步长改为整数，不要出现小数，正数向上取整，负数向下取整 if (obj.offsetLeft == target) { clearInterval(obj.timer) //停止动画，本质是停止定时器 if (callback) { callback(); // 回调函数写到定时器结束里面 } } //步长作为一个慢慢变小的值才能实现从快到慢的缓动停止的效果 obj.style.left = obj.offsetLeft + step + 'px'; },15) }基本上都用注释写清楚了，应该能每一步都看得懂了。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
