JS实现轮播图小案例

 更新时间:2021年11月16日 17:28:33   作者: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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序抽奖组件的使用步骤

    微信小程序抽奖组件的使用步骤

    这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JS target与currentTarget区别说明

    JS target与currentTarget区别说明

    target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的,而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
    2011-08-08
  • javascript 像素拼图实现代码

    javascript 像素拼图实现代码

    非常不错的像素拼图效果
    2009-04-04
  • QTreeWidget中MainWindow窗体中布局器不起作用详解

    QTreeWidget中MainWindow窗体中布局器不起作用详解

    本文主要介绍了QTreeWidget中MainWindow窗体中布局器不起作用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JavaScript弹窗基础篇

    JavaScript弹窗基础篇

    这篇文章主要介绍了JavaScript弹窗基础篇的相关资料,需要的朋友可以参考下
    2016-04-04
  • 细数promise与async/await的使用及区别说明

    细数promise与async/await的使用及区别说明

    这篇文章主要介绍了细数promise与async/await的使用及区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • JavaScript创建类/对象的几种方式概述及实例

    JavaScript创建类/对象的几种方式概述及实例

    JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的,下面与大家分享下创建类/对象的几种方式,感兴趣的朋友可以了解下哈
    2013-05-05
  • 超链接的禁用属性Disabled使用示例

    超链接的禁用属性Disabled使用示例

    可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击,下面有个示例,大家不妨参考下
    2014-07-07
  • 实现js保留小数点后N位的代码

    实现js保留小数点后N位的代码

    最近在做项目的时候,遇到要保留小数点后N位的问题,经过一番思索,最终完成了,这里记录一下,下次需要直接就能拉出来用了
    2014-11-11
  • 一些很实用且必用的小脚本代码

    一些很实用且必用的小脚本代码

    一些很实用且必用的小脚本代码...
    2006-08-08

最新评论