1.轮播图的结构
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style/index.css"><script src="js/index.js"></script><script src="js/animate.js"></script></head><body><div class="banners"><ul class="images"><!-- 核心滚动区 --><li><a href="#"><img src="images/test1.jpg" alt=""></a></li> <li><a href="#"><img src="images/test3.jpg" alt=""></a></li> <li><a href="#"><img src="images/test4.jpg" alt=""></a></li> <li><a href="#"><img src="images/test5.jpg" alt=""></a></li> </ul> <!-- 左箭头 --><a href="javascript:;" class="prev"> <</a><!-- 右箭头 --><a href="javascript:;" class="next"> ></a><!-- 小圆点 --><ul class="dots"><!-- li 可用js动态生成--></ul></div></body></html>
2. 轮播图样式
新建style文件夹 和里面的index.css文件 内容如下：
/* 1. 样式重置 */* {margin: 0;padding: 0;}li {list-style: none;}/* 外层盒子样式,左右箭头和小圆点都要采用绝对定位，所以其父盒子要采用相对定位*/.banners {position: relative;overflow: hidden;width: 520px;height: 280px;margin: 100px auto;}/*滚动区 包裹所有图片的盒子 宽度要足够宽可以放下所有的图片*/.images {position: absolute;top: 0;left: 0;width: 700%;}/* 对图片使用浮动 使其排列在一行*/.images li{float: left;}/* 图片大小会撑大盒子,设置图片大小 */.banners img {width: 520px;height: 280px;}/*左右箭头相同样式*/.prev,.next {display: none;position: absolute; /* 绝对定位的盒子垂直居中 */top: 50%;margin-top: -15px;width: 20px;height: 30px;background: rgba(0,0,0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none; }/*左箭头靠左定位*/.prev {left: 0;/* 设置圆角 */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}/*右箭头靠右定位*/.next {right: 0;/* 设置圆角 */border-top-left-radius: 15px;border-bottom-left-radius: 15px;}/* 小圆点外层盒子的样式 */.dots {position: absolute;bottom: 10px;left: 50%;margin-left: -35px;height: 13px;background:rgba(255,255,255, .3);border-radius:7px;}/* 小圆点样式*/.dots li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}/* 小圆点被点击的样式 */.dots .active {background-color: #ff5000;}
3. 轮播图功能
鼠标经过轮播图 左右箭头显示， 鼠标离开 左右箭头隐藏；点击左右箭头，图片切换，底下的小圆点也会对应变化点击小圆点，也能实现切换图片效果鼠标不经过轮播图，自动播放鼠标经过轮播图，自动播放停止新建js文件夹和里面的index.js文件，内如如下
window.addEventListener('load', function () {//1. 获取元素var prev = document.querySelector('.prev');var next = document.querySelector('.next');var banners = document.querySelector('.banners')//2. 鼠标经过，显示左右按钮banners.addEventListener('mouseenter', function () {prev.style.display = 'block';next.style.display = 'block';clearInterval(timer);timer = null;//清除计时器});//3. 鼠标离开，隐藏左右按钮banners.addEventListener('mouseleave', function () {prev.style.display = 'none';next.style.display = 'none';timer = setInterval(function () {// 轮播图自动切换 相当于点击右箭头next.click();}, 2000);});// 4. 动态生成小圆圈 有几张图片，就生成几个小圆圈var images = document.querySelector('.images');var dots = document.querySelector('.dots');var banners_width = banners.offsetWidth;for (var i = 0; i < images.children.length; i++) {//创建一个小livar li = document.createElement('li');//记录当前小圆圈的索引号 通过创建自定义属性来做li.setAttribute('index', i);dots.appendChild(li);//5. 小圆圈的排他思想 可以直接在生成小圆圈的同时直接绑定点击事件li.addEventListener('click', function () {for (var i = 0; i < dots.children.length; i++) {dots.children[i].className = '';}this.className = 'active';// 6. 点击小圆圈，移动图片，本质移动的是ul//ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值// 当我们点击了某个小li 就拿到它的index属性var index = this.getAttribute('index');//当我们点击了某个小li 就要把这个小li 的index给numnum = index;circle = index;animate(focus, -index * banners_width);})}//把dots 里面的第一个小li设置类名为 activedots.children[0].className = 'active';// 实现滑动到最后一张照片时 可以平滑地过渡到第一张，克隆第一张图片 放在ul最后面，在其后克隆小圆点不会多var first = images.children[0].cloneNode(true);images.appendChild(first);// 点击右侧按钮，图片滚动一张var num = 0;//circle 控制小圆圈的播放var circle = 0;next.addEventListener('click', function () {// 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零if (num == images.children.length - 1) {images.style.left = 0;num = 0;}num++;animate(images, -num * banners_width);// 8. 点击右侧按钮，小圆圈跟随一起变化circle++;if (circle == dots.children.length) {circle = 0;}circleChange();})//左侧按钮点击事件prev.addEventListener('click', function () {// 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零if (num == 0) {num = images.children.length - 1;images.style.left = -num * banners_width + 'px';}num--;animate(images, -num * banners_width)// 8. 点击右侧按钮，小圆圈跟随一起变化circle--;circle = circle < 0 ? dots.children.length - 1 : circle;//调用函数circleChange();})function circleChange() {for (var i = 0; i < dots.children.length; i++) {dots.children[i].className = '';}dots.children[circle].className = 'active';}var timer = setInterval(function () {//手动调用点击事件next.click();}, 2000);})
新建js文件里的animate文件 内容如下：
function animate(obj, target,callback) {//让元素只有一个定时器在执行，需要清除以前的定时器clearInterval(obj.timer);obj.timer = setInterval(function () {var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {//停止动画 本质是停止定时器clearInterval(obj.timer)//回调函数写到定时器结束位置if(callback) {callback();}}//把每次加1这个步长值改为一个慢慢变小的值obj.style.left = obj.offsetLeft + step + 'px';}, 15);}
