ASCII码 ASCII码

JS实现轮播图小案例

发布于:2022-04-23 17:30:34  栏目:技术文档

这篇文章主要为大家详细介绍了JS实现轮播图小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下

分析:

  1. 点击左右箭头 滑动轮播图
  2. 鼠标不在轮播图内时 每隔2秒自动滑动轮播图
  3. 鼠标移入时 停止自动滑动轮播图
  4. 点击小圆圈 显示对应的轮播图

1、鼠标移入、移出显示或隐藏左右箭头:

  1. // 获取左右箭头的元素
  2. let arrow_l = this.document.querySelector('.arrow-l');
  3. let arrow_r = this.document.querySelector('.arrow-r');
  4. // 获取到轮播图盒子元素
  5. let focus = this.document.querySelector('.focus');
  6. // 轮播图盒子添加鼠标移入移出事件 显示或隐藏 左右箭头
  7. focus.addEventListener('mouseenter', function(e) {
  8. arrow_l.style.display = 'block';
  9. arrow_r.style.display = 'block';
  10. // 鼠标移入的时候清除定时函数,不再自动滑动轮播图
  11. clearInterval(timer);
  12. timer = null;
  13. });
  14. focus.addEventListener('mouseleave', function(e) {
  15. arrow_l.style.display = 'none';
  16. arrow_r.style.display = 'none';
  17. // 鼠标移出 添加定时任务,每2秒来触发一次点击右箭头的点击
  18. timer = setInterval(function() {
  19. arrow_r.click();
  20. }, 2000);
  21. })

2、添加ol内的li标签:

  1. // 获取到ul列表(轮播图列表)和ol列表 (小圆圈列表)元素
  2. var ul = focus.querySelector('ul');
  3. // 此时ol列表内没有元素
  4. var ol = focus.querySelector('.circle');
  5. // 循环轮播图列表 有多少张轮播图就添加多少个小圆圈
  6. for (var i = 0; i < ul.children.length; i++) {
  7. // 创建li标签
  8. var li = this.document.createElement('li');
  9. // 给li标签添加自定义属性 为轮播图的下标 用于
  10. li.setAttribute('l-index', i);
  11. // ol标签添加li标签
  12. ol.appendChild(li);
  13. // 每一个li标签添加点击函数
  14. li.addEventListener('click', function() {
  15. // 清除所有小圆圈的样式
  16. for (var j = 0; j < ol.children.length; j++) {
  17. ol.children[j].className = '';
  18. }
  19. // 点击哪一个小圆圈 就添加样式
  20. this.className = 'current';
  21. // 点击小圆圈 更改num和circl 来更换轮播图
  22. num = this.getAttribute('l-index');
  23. circl = this.getAttribute('l-index');
  24. // 动画效果
  25. animate(ul, -num * focusWidth);
  26. })
  27. }

3、复制第一张轮播图到ul的最后,显得轮播图更自然,添加记录轮播图的下标和记录小圆圈的下标,添加节流阀:节流阀:

添加一个节流阀 默认为true 如果点击之后立即改为false 如果没处理完上次点击的事件 这个时间内的点击事件不再处理类似一个锁,当锁住的时候只做一件事,别的点击不会再做,等什么时候开了锁,什么时候才可以做。

  1. // 克隆一个第一张轮播图的节点添加到ul内
  2. // 播放到最后一个的时候 转到第一个看着有连贯性
  3. ol.children[0].className = 'current';
  4. let cloneLi = ul.children[0].cloneNode(true);
  5. ul.appendChild(cloneLi);
  6. // 添加一个下标 来记录轮播图播放到了第几张
  7. num = 0;
  8. // 与num类似,记录小圆圈的下标
  9. circl = 0;
  10. // 添加节流阀
  11. flag = true;

4、右箭头、左箭头的点击事件和小圆圈更改样式:

  1. // 点击右箭头的 点击事件
  2. arrow_r.addEventListener('click', function(e) {
  3. // 添加一个节流阀 默认为True 如果点击之后立即改为false 如果没处理完上次点击的事件 这个时间内的点击事件不再处理
  4. if (flag) {
  5. // 改变节流阀的状态
  6. flag = false;
  7. // 如果num下标为最后一张 就恢复到第一张 把num下标改为默认0
  8. if (num == ul.children.length - 1) {
  9. ul.style.left = 0;
  10. num = 0;
  11. }
  12. // num下标加1
  13. num++;
  14. // 改变动画效果 滑动到 第几张轮播图 * 一张的宽度 的距离
  15. animate(ul, -num * focusWidth, function() {
  16. // 回调函数设置节流阀为true 可以再次点击
  17. flag = true;
  18. });
  19. // 小圆圈+1
  20. circl++;
  21. // 如果小圆圈到了最后一个 恢复为0
  22. if (circl == ul.children.length - 1) {
  23. circl = 0;
  24. }
  25. // 改变小圆圈的样式
  26. circlChange();
  27. }
  28. })
  1. // 左箭头的点击事件
  2. arrow_l.addEventListener('click', function(e) {
  3. if (flag) {
  4. flag = false;
  5. // 判断为0时说明是从第一张开始往左点
  6. if (num == 0) {
  7. // 更改num下标为最后一个
  8. num = ul.children.length - 1;
  9. // 更改轮播图为最后一个
  10. ul.style.left = -num * focusWidth + 'px';
  11. }
  12. // num -1
  13. num--;
  14. // 动画效果
  15. animate(ul, -num * focusWidth, function() {
  16. flag = true;
  17. });
  18. // 如果小圆圈为0 说明到了第一个轮播图
  19. if (circl == 0) {
  20. // 小圆圈到最后一个
  21. circl = ul.children.length - 1;
  22. }
  23. // 小圆圈-1
  24. circl--;
  25. // 改变小圆圈的样式
  26. circlChange();
  27. }
  28. })
  1. // 左箭头的点击事件
  2. arrow_l.addEventListener('click', function(e) {
  3. if (flag) {
  4. flag = false;
  5. // 判断为0时说明是从第一张开始往左点
  6. if (num == 0) {
  7. // 更改num下标为最后一个
  8. num = ul.children.length - 1;
  9. // 更改轮播图为最后一个
  10. ul.style.left = -num * focusWidth + 'px';
  11. }
  12. // num -1
  13. num--;
  14. // 动画效果
  15. animate(ul, -num * focusWidth, function() {
  16. flag = true;
  17. });
  18. // 如果小圆圈为0 说明到了第一个轮播图
  19. if (circl == 0) {
  20. // 小圆圈到最后一个
  21. circl = ul.children.length - 1;
  22. }
  23. // 小圆圈-1
  24. circl--;
  25. // 改变小圆圈的样式
  26. circlChange();
  27. }
  28. })

5、轮播图动画函数的封装:

  1. function animate(obj, target, callback) {
  2. // console.log(callback); callback = function() {} 调用的时候 callback()
  3. // 先清除以前的定时器,只保留当前的一个定时器执行
  4. clearInterval(obj.timer);
  5. obj.timer = setInterval(function() {
  6. // 步长值写到定时器的里面
  7. // 把我们步长值改为整数 不要出现小数的问题
  8. // var step = Math.ceil((target - obj.offsetLeft) / 10);
  9. var step = (target - obj.offsetLeft) / 10;
  10. step = step > 0 ? Math.ceil(step) : Math.floor(step);
  11. if (obj.offsetLeft == target) {
  12. // 停止动画 本质是停止定时器
  13. clearInterval(obj.timer);
  14. // 回调函数写到定时器结束里面
  15. // if (callback) {
  16. // // 调用函数
  17. // callback();
  18. // }
  19. callback && callback();
  20. }
  21. // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
  22. obj.style.left = obj.offsetLeft + step + 'px';
  23. }, 15);
  24. }
相关推荐
阅读 +