js原生轮播图

不念不忘少年蓝@ 2023-07-07 08:22 36阅读 0赞

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 < 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;
                // num = circle = index;
                console.log(focusWidth);
                console.log(index);
    
                animate(ul, -index * focusWidth);
            })
        }
        // 把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;
        arrow_r.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 * 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 < 0 ? ol.children.length - 1 : circle;
                // 调用函数
                circleChange();
            }
        });
    
        function circleChange() {
            // 先清除其余小圆圈的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() {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);
    
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 js原生轮播图

1.先画轮播图片样式 2.再画轮播按钮 3.样式完成，写js代码 4.获取所有节点 <!DOCTYPE html> <html> <head> <t

灰太狼/ 2023年08月17日 15:59/ 0 赞/ 167 阅读

相关 js原生轮播图

window.addEventListener('load', function() { // 1. 获取元素

不念不忘少年蓝@/ 2023年07月07日 08:22/ 0 赞/ 37 阅读

相关原生js层叠轮播图

前言: 已经一个月没有怎么更博了，一直在学习一些其他得。之前在网上看到一个层叠样式得轮播图，也是看过一个博主得内容以后自己又理清楚了思路才写出来。原文出处：https:

向右看齐/ 2022年11月08日 14:15/ 0 赞/ 215 阅读

相关原生js实现轮播图

原生js简单轮播图实现原理：一系列大小相等的图片平铺，利用css布局，只显示其中一张图片，其它图片隐藏。通过偏移量来实现滑动，或者手动点击来实现滑动。 ![Im

深藏阁楼爱情的钟/ 2022年06月14日 02:12/ 0 赞/ 317 阅读

相关原生JS实现轮播图

原生JS实现轮播图 js实现轮播图，我经历了一下几个步骤： 1. 把静态界面写出来 2. 添加切换上一张下一张的箭头(为了省事，直接用的`<`和`>`…) 3.

迈不过友情╰/ 2022年06月08日 23:06/ 0 赞/ 383 阅读

相关 JS原生轮播图实现

作为一个PHP全栈攻城狮，不仅要会后端PHP和数据库，还要会前端JS。今天源码时代 [PHP培训][PHP] 学科老师要和大家分享一下JS原生编写轮播图的插件。说起轮播图，很

阳光穿透心脏的1/2处/ 2022年06月07日 10:56/ 0 赞/ 350 阅读

相关原生js实现轮播图

很多很多网站经常会用到一个特效，那就是轮播图，对于日新月异的前端技术来说其实就是一个框架一个接口的事，但轮播的原理是什么？用最原始的javascript来写又是

心已赠人/ 2022年06月02日 00:25/ 0 赞/ 300 阅读

相关原生js轮播图

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

Bertha 。/ 2022年05月28日 12:21/ 0 赞/ 285 阅读

相关原生js实现轮播图

轮播图基本上是前端所必须面临的一个功能。而且在网上可以找到各种各样的插件或者写法。但是我个人觉得还是写一下比较好。这里用到的是原生JS、CSS3相结合的写法。对IE 8

我就是我/ 2022年04月11日 12:45/ 0 赞/ 362 阅读

相关轮播图原生js实现

原生js实现轮播图　很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。　[

你的名字/ 2022年03月22日 11:46/ 0 赞/ 403 阅读