网页轮播图的代码原理分析和实现

您所在的位置：网站首页 › 网页怎么实现图片的轮播 › 网页轮播图的代码原理分析和实现

网页轮播图的代码原理分析和实现

2023-03-20 21:07| 来源: 网络整理| 查看: 265

一、结构搭建：

* { margin: 0; padding: 0 } img { border: 0; /*ie6*/ vertical-align: middle; } /*去掉列表前面的小点*/ li { list-style: none; } .fl { float: left; } .focus { position: relative; width: 721px; height: 455px; background-color: purple; overflow: hidden; } .focus ul { position: absolute; top: 0; left: 0; width: 600%; } .focus ul li { float: left; } .arrow-l, .arrow-r { display: none; position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; z-index: 2; } .arrow-r { right: 0; } .circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; } .current { background-color: #fff; } ; ;

二、鼠标经过显示隐藏左右按钮分析：因为js较多，我们单独新建js文件夹，在新建js文件，引入页面中。此时需要添加load事件。鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。显示隐藏display属性。

三、动态生成小圆圈分析： ①小圆圈的个数要跟图片张数一致 ②所以首先先得到ul里面图片的张数（图片放入li里面，所以就是li的个数） ③利用循环动态生成小圆圈要放入ol里面 ④创建节点createElement('li')，插入节点ol.appendChild(li)

// 3. 动态生成小圆圈有几张图片，我就生成几个小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); // console.log(ul.children.length); for (var i = 0; i // 干掉所有人把所有的小li 清除 current 类名 for (var i = 0; i // 如果走到了最后复制的一张图片，此时我们的ul 要快速复原 left 改为 0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul,-num*focusWidth); } });

七、克隆第一张图片分析： ①克隆ul第一个li cloneNode(）加true深克隆，复制里面的子节点，false浅克隆，不复制里面的子节点 ②添加到ul最后面appendChild ③这样应加到第六步前面，以防复制第一个时候小圆圈多一个出来

// 7. 克隆第一张图片(li)放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first);

八、小圆圈跟随右侧按钮一起变化分析： ①点击右侧按钮，小圆圈跟随变化 ②最简单的做法是再声明一个变量circle，每次点击自增1，注意，左侧按钮也需要这个变量，因此要声明全局变量 ③但是图片有5张，我们小圆圈只有4个少一个，必须加一个判断条件 ④如果circle==4就重新复原0

// circle 控制小圆圈的播放 var circle = 0; // 8. 点击右侧按钮，小圆圈跟随一起变化可以再声明一个变量控制小圆圈的播放 circle++; // 如果circle == 4 说明走到最后我们克隆的这张图片了我们就复原 if (circle == ol.children.length) { circle = 0; } // 先清除其余小圆圈的current类名 for (var i = 0; i // 如果走到了第一张复制第一张图片，此时我们的ul 要快速移到最后一张 left 改为最后一张位置 if (num == 0) { num = ul.children.length - 1;//最后一张索引号的位置 ul.style.left = -num * focusWidth + 'px'; } num--; // 点击左侧按钮，小圆圈跟随一起变化可以再声明一个变量控制小圆圈的播放 circle--; // 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈（3） if (circle // 先清除其余小圆圈的current类名 for (var i = 0; i //手动调用点击事件 arrow_r.click(); }, 2000); //鼠标经过focus就停止定时器 clearInterval(timer); timer = null; // 清除定时器变量 //鼠标离开focus就开启定时器 timer = setInterval(function() { //手动调用点击事件 arrow_r.click(); }, 2000);

十二、节流阀: 防止轮播图按钮连续点击造成播放过快。节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。核心实现思路： ①利用回调函数，添加一个变量来控制，锁住函数和解锁函数。 ②开始设置一个变量var flag= true; If(flag){flag = false; do something} 关闭水龙头， ③利用回调函数动画执行完毕， flag = true 打开水龙头

十三、整理所有js

//index.js window.addEventListener('load', function() { // 1. 获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth; // 2. 鼠标经过focus 就显示隐藏左右按钮 focus.addEventListener('mouseenter', function() { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null; // 清除定时器变量 }); focus.addEventListener('mouseleave', function() { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function() { //手动调用点击事件 arrow_r.click(); }, 2000); }); // 3. 动态生成小圆圈有几张图片，我就生成几个小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.circle'); // console.log(ul.children.length); for (var i = 0; i // 干掉所有人把所有的小li 清除 current 类名 for (var i = 0; i if (flag) { flag = false; // 关闭节流阀 // 如果走到了最后复制的一张图片，此时我们的ul 要快速复原 left 改为 0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function() { flag = true; // 打开节流阀 }); // 8. 点击右侧按钮，小圆圈跟随一起变化可以再声明一个变量控制小圆圈的播放 circle++; // 如果circle == 4 说明走到最后我们克隆的这张图片了我们就复原 if (circle == ol.children.length) { circle = 0; } // 调用函数 circleChange(); } }); // 9. 左侧按钮做法 arrow_l.addEventListener('click', function() { if (flag) { flag = false; if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth, function() { flag = true; }); // 点击左侧按钮，小圆圈跟随一起变化可以再声明一个变量控制小圆圈的播放 circle--; // 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈（3） // if (circle < 0) { // circle = ol.children.length - 1; // } circle = circle ol.children[i].className = ''; } // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } // 10. 自动播放轮播图 var timer = setInterval(function() { //手动调用点击事件 arrow_r.click(); }, 2000); }) //animate.js function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); 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(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }

【本文地址】

网页轮播图的代码原理分析和实现

网页轮播图的代码原理分析和实现

今日新闻

推荐新闻