| 用html css JavaScript写一个功能全面的王者荣耀轮播图 通俗易懂 | 您所在的位置：网站首页 › 王者荣耀网络自动切换 › 用html css JavaScript写一个功能全面的王者荣耀轮播图 通俗易懂 |
用html css JavaScript写一个功能全面的王者荣耀轮播图 通俗易懂
|
首先分析一下案例需求： 1.鼠标经过 就显示隐藏左右按钮 2.动态生成小圆圈 有几张图片，就生成几个小圆圈 3.点击小圆圈，移动图片 当然移动的是 ul（大盒子） 4.点击左右按钮， 图片滚动一张，小圆圈随之变换（先做右侧） 5.鼠标经过图片不动 6.到最后一张时在点击下一张则跳到第一张（在第一张点击上一张则跳到最后一张） 7.轮播图自动播放 html骨架： ; ;
css代码： * { padding: 0; margin: 0; box-sizing: border-box; } li { list-style: none; } .main { position: relative; width: 721px; height: 455px; margin: 100px auto; overflow: hidden; } .main ul { position: absolute; left: 0; top: 0; width: 4000px; } .main ul li { float: left; } .main ul li img { width: 721px; height: 455px; } .main .left { position: absolute; display: none; left: 0; top: 50%; margin-top: -15px; width: 20px; height: 30px; background-color: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; line-height: 30px; font-size: 18px; z-index: 2; } .main .right { position: absolute; display: none; right: 0; top: 50%; margin-top: -15px; width: 20px; height: 30px; background-color: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; line-height: 30px; font-size: 18px; z-index: 2; } .main a { text-decoration: none; } .main .current { background-color: #fff; } .main ol { position: absolute; left: 50px; bottom: 50px; } .main ol li { float: left; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #fff; margin: 0 5px; }页面缩小效果；第一张后面的图片隐藏后效果
然后开始写JavaScript 写定时器函数后面我们要调用 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); }功能实现js代码： // 1. 获取元素 var left = document.querySelector('.left'); var right = document.querySelector('.right'); var main = document.querySelector('.main'); var mainWidth = main.offsetWidth; // 2. 鼠标经过focus 就显示隐藏左右按钮 main.addEventListener('mouseenter', function() { left.style.display = 'block'; right.style.display = 'block'; clearInterval(timer); timer = null; // 清除定时器变量 }) main.addEventListener('mouseleave', function() { left.style.display = 'none'; right.style.display = 'none'; timer = setInterval(function() { //手动调用点击事件 right.click(); }, 2000); }) // 3. 动态生成小圆圈 有几张图片，我就生成几个小圆圈 var ul = main.querySelector('ul'); var ol = main.querySelector('.circle'); for (var i = 0; i < ul.children.length; i++) { // 创建一个小li var li = document.createElement('li'); // 记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i); // 把小li插入到ol 里面 ol.appendChild(li); // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件 li.addEventListener('click', function() { // 干掉所有人 把所有的小li 清除 current 类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下我自己 当前的小li 设置current 类名 this.className = 'current'; // 5. 点击小圆圈，移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小li 的索引号 var index = this.getAttribute('index'); // 当我们点击了某个小li 就要把这个li 的索引号给 num num = index; // 当我们点击了某个小li 就要把这个li 的索引号给 circle circle = index; animate(ul, -index * mainWidth); }) } // 把ol里面的第一个小li设置类名为 current ol.children[0].className = 'current'; // 6. 克隆第一张图片(li)放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 7. 点击右侧按钮， 图片滚动一张 var num = 0; // circle 控制小圆圈的播放 var circle = 0; //flag 节流阀 var flag = true; right.addEventListener('click', function() { if (flag) { flag = false; // 关闭节流阀 // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * mainWidth, function() { flag = true; // 打开节流阀 }); // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle++; // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原 if (circle == ol.children.length) { circle = 0; } for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } }) // 9. 左侧按钮做法 left.addEventListener('click', function() { if (flag) { flag = false; if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * mainWidth + 'px'; } num--; animate(ul, -num * mainWidth, function() { flag = true; }); // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle--; // 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈（3） if (circle < 0) { circle = ol.children.length - 1; } // 先清除其余小圆圈的current类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } }) // 10. 自动播放轮播图 var timer = setInterval(function() { right.click(); }, 2000);
最终效果， 视频转GIF模糊了： |
【本文地址】
公司简介
联系我们