JS实现轮播图小案例
作者:B.Bz
这篇文章主要为大家详细介绍了JS实现轮播图小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下
分析:
- 点击左右箭头 滑动轮播图
- 鼠标不在轮播图内时 每隔2秒自动滑动轮播图
- 鼠标移入时 停止自动滑动轮播图
- 点击小圆圈 显示对应的轮播图
1、鼠标移入、移出显示或隐藏左右箭头:
// 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r'); // 获取到轮播图盒子元素 let focus = this.document.querySelector('.focus'); // 轮播图盒子添加鼠标移入移出事件 显示或隐藏 左右箭头 focus.addEventListener('mouseenter', function(e) { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; // 鼠标移入的时候清除定时函数,不再自动滑动轮播图 clearInterval(timer); timer = null; }); focus.addEventListener('mouseleave', function(e) { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; // 鼠标移出 添加定时任务,每2秒来触发一次点击右箭头的点击 timer = setInterval(function() { arrow_r.click(); }, 2000); })
2、添加ol内的li标签:
// 获取到ul列表(轮播图列表)和ol列表 (小圆圈列表)元素 var ul = focus.querySelector('ul'); // 此时ol列表内没有元素 var ol = focus.querySelector('.circle'); // 循环轮播图列表 有多少张轮播图就添加多少个小圆圈 for (var i = 0; i < ul.children.length; i++) { // 创建li标签 var li = this.document.createElement('li'); // 给li标签添加自定义属性 为轮播图的下标 用于 li.setAttribute('l-index', i); // ol标签添加li标签 ol.appendChild(li); // 每一个li标签添加点击函数 li.addEventListener('click', function() { // 清除所有小圆圈的样式 for (var j = 0; j < ol.children.length; j++) { ol.children[j].className = ''; } // 点击哪一个小圆圈 就添加样式 this.className = 'current'; // 点击小圆圈 更改num和circl 来更换轮播图 num = this.getAttribute('l-index'); circl = this.getAttribute('l-index'); // 动画效果 animate(ul, -num * focusWidth); }) }
3、复制第一张轮播图到ul的最后,显得轮播图更自然,添加记录轮播图的下标和记录小圆圈的下标,添加节流阀:
节流阀:
添加一个节流阀 默认为true 如果点击之后立即改为false 如果没处理完上次点击的事件 这个时间内的点击事件不再处理
类似一个锁,当锁住的时候只做一件事,别的点击不会再做,等什么时候开了锁,什么时候才可以做。
// 克隆一个第一张轮播图的节点添加到ul内 // 播放到最后一个的时候 转到第一个看着有连贯性 ol.children[0].className = 'current'; let cloneLi = ul.children[0].cloneNode(true); ul.appendChild(cloneLi); // 添加一个下标 来记录轮播图播放到了第几张 num = 0; // 与num类似,记录小圆圈的下标 circl = 0; // 添加节流阀 flag = true;
4、右箭头、左箭头的点击事件和小圆圈更改样式:
// 点击右箭头的 点击事件 arrow_r.addEventListener('click', function(e) { // 添加一个节流阀 默认为True 如果点击之后立即改为false 如果没处理完上次点击的事件 这个时间内的点击事件不再处理 if (flag) { // 改变节流阀的状态 flag = false; // 如果num下标为最后一张 就恢复到第一张 把num下标改为默认0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } // num下标加1 num++; // 改变动画效果 滑动到 第几张轮播图 * 一张的宽度 的距离 animate(ul, -num * focusWidth, function() { // 回调函数设置节流阀为true 可以再次点击 flag = true; }); // 小圆圈+1 circl++; // 如果小圆圈到了最后一个 恢复为0 if (circl == ul.children.length - 1) { circl = 0; } // 改变小圆圈的样式 circlChange(); } })
// 左箭头的点击事件 arrow_l.addEventListener('click', function(e) { if (flag) { flag = false; // 判断为0时说明是从第一张开始往左点 if (num == 0) { // 更改num下标为最后一个 num = ul.children.length - 1; // 更改轮播图为最后一个 ul.style.left = -num * focusWidth + 'px'; } // num -1 num--; // 动画效果 animate(ul, -num * focusWidth, function() { flag = true; }); // 如果小圆圈为0 说明到了第一个轮播图 if (circl == 0) { // 小圆圈到最后一个 circl = ul.children.length - 1; } // 小圆圈-1 circl--; // 改变小圆圈的样式 circlChange(); } })
function circlChange() { // 遍历ol列表 删除每一个小圆圈的样式 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; }; // 给当前circl下标的小圆圈添加样式 ol.children[circl].className = 'current'; }
5、轮播图动画函数的封装:
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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。