AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jsjs原生 JavaScript轮播图 渐变淡入淡出

2024-01-31 83
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： jsjs原生 JavaScript轮播图 渐变淡入淡出

 下面是整体代码 复制即可使用，

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页轮播图案例</title>
    <script>
        window.addEventListener('load', function () {
            var box = document.querySelector('.box');
            var right = box.querySelector('.right');
            var left = box.querySelector('.left');
            var ul = box.querySelector('ul');
            var ul_lis = ul.querySelectorAll('li');
            var ol = box.querySelector('ol');
            var num = 0;
            var circle = 0;
            var flag = true;
            // 1.鼠标经过轮播图模块, 左右按钮显示, 离开隐藏左右按钮。
            box.addEventListener('mouseenter', function () {
                right.style.display = 'block';
                left.style.display = 'block';
                clearInterval(timer);
                timer = null;
            });
            box.addEventListener('mouseleave', function () {
                right.style.display = 'none';
                left.style.display = 'none';
                timer = setInterval(function () {
                    right.click();
                }, 2000);
            });
            var timer = setInterval(function () {
                right.click();
            }, 2000);
            //2.动态生成小圆圈 
            for (var i = 0; i < ul_lis.length; i++) {
                var li = document.createElement('li');
                li.className = 'current';
                li.setAttribute('index', i);
                ol.appendChild(li);
                //添加注册事件  排他思想
                li.addEventListener('click', function () {
                    for (var i = 0; i < ol.children.length; i++) {
                        ul_lis[i].style.opacity = '0';//排他思想：全部图片设置为透明
                        ol.children[i].className = 'current';
                    }
                    this.className = 'current white';
                    var index = this.getAttribute('index');
                    ul_lis[index].style.opacity = '1';//留下需要显示的图片
                    num = index;
                    circle = index;
                });
            }
            ol.children[0].className = 'current white';
            //TRUE 深拷贝 复制内容且复制标签
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
            // 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。
            right.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    if (num == ul.children.length - 1) {
                        num = 0;
                    }
                    num++;
                    if (num == 4) { num = 0; }
                    for (var i = 0; i < ol.children.length; i++) {
                        ul_lis[i].style.opacity = '0';
                    }
                    ul_lis[num].style.opacity = '1';
                    flag = true;
                    //变量控制小圆圈的变化
                    circle++;
                    if (circle == ol.children.length) {
                        circle = 0;
                    }
                    circlechange();
                }
            });
            function circlechange() {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = 'current';
                }
                ol.children[circle].className = 'current white';
            };
            left.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    //实现无缝滚动
                    if (num == 0) {
                        num = ul.children.length - 1;
                    }
                    num--;
                    if (num == -1) { num = 4; }
                    for (var i = 0; i < ol.children.length; i++) {
                        ul_lis[i].style.opacity = '0';
                    }
                    ul_lis[num].style.opacity = '1';
                    flag = true;//一次只执行完毕才可以点击下一次
                    //变量控制小圆圈的变化
                    circle--;
                    if (circle < 0) {
                        circle = ol.children.length - 1;
                    }
                    circlechange();
                }
            });
        });
    </script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .box {
            position: relative;
            width: 810px;
            height: 540px;
            left: 50%;
            transform: translateX(-50%);
        }
        img {
            width: 810px;
            height: 540px;
        }
        ul li {
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0;
            transition: 1s;
        }
        ul li:first-child {
            opacity: 1;
        }
        ul {
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        span {
            width: 20px;
            height: 40px;
            font-size: 25px;
            line-height: 40px;
            display: block;
            position: absolute;
            color: black;
            background-color: #ccc;
            opacity: .5;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            display: none;
        }
        .right {
            right: 0px;
        }
        .left {
            left: 0px;
        }
        ol {
            position: absolute;
            left: 50%;
            z-index: 999;
            transform: translateX(-50%);
            bottom: 5px;
        }
        .current {
            float: left;
            display: block;
            width: 25px;
            height: 5px;
            background-color: rgb(41, 39, 39);
            margin-right: 10px;
            opacity: 0.5;
        }
        .white {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img src="../img/1.jpg" alt="">
            </li>
            <li>
                <img src="../img/2.jpg" alt="">
            </li>
            <li>
                <img src="../img/3.jpg" alt="">
            </li>
            <li>
                <img src="../img/4.jpg" alt="">
            </li>
        </ul>
        <span class="right"> &gt; </span>
        <span class="left"> &lt; </span>
        <ol>
        </ol>
    </div>
</body>
</html>

常见的轮播图有两种：移动距离轮播图，渐变切换轮播图但是轮播图的代码都是差不太多的。这里就是给大家讲解的是渐变轮播图的切换，

这个是对轮播图的上下左右进行隐藏

box（装整个轮播图的盒子）获得焦点的时候按钮style.display属性改为block失去焦点none。

//获取焦点显示
box.addEventListener('mouseenter', function () {
        right.style.display = 'block';
        left.style.display = 'block';
    });
 //失去焦点隐藏
box.addEventListener('mouseleave', function () {
        right.style.display = 'none';
        left.style.display = 'none';
    });

添加圆点

图片的数量动态生成小圆圈的数量，实现灵活控制。根据ul里的li的长度得到小圆圈的数量。

for (var i = 0; i < ul_lis.length; i++) {
        var li = document.createElement('li');
        li.className = 'current';//current类是样式
        ol.appendChild(li);
        //添加注册事件  排他思想
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = 'current';
            }
            this.className = 'current white';
            var index = this.getAttribute('index');
            num = index;
            circle = index;
        });
    }
    ol.children[0].className = 'current white';//默认第一个为白色底

给左右添加

给ol添加一个index属性，以便于获取当前属于第几张图片（ol 和 ul 里面的 li 数量是一致的）。给左按钮添加一个点击事件，根据num（num由index赋值过来）跳转下一张图；设置flag（节流阀）保证是一次跳转完成之后才可以实现下一次的跳转。

//TRUE 深拷贝 复制内容且复制标签
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                num = 0;
            }
            num++;
            if (num == 4) { num = 0; }
            for (var i = 0; i < ol.children.length; i++) {
                ul_lis[i].style.opacity = '0';
            }
            ul_lis[num].style.opacity = '1';
            flag = true;
            //变量控制小圆圈的变化
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circlechange();
        }
    });
    left.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //实现无缝滚动
            if (num == 0) {
                num = ul.children.length - 1;
            }
            num--;
            if (num == -1) { num = 4; }
            for (var i = 0; i < ol.children.length; i++) {
                ul_lis[i].style.opacity = '0';
            }
            ul_lis[num].style.opacity = '1';
            flag = true;//一次只执行完毕才可以点击下一次
            //变量控制小圆圈的变化
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circlechange();
        }
    });
});
function circlechange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = 'current';
        }
        ol.children[circle].className = 'current white';
    };

最后一步就是 实现自动轮播啦 

box.addEventListener('mouseenter', function () {
        clearInterval(timer);
        timer = null;
    });
box.addEventListener('mouseleave', function () {
        timer = setInterval(function () {
            right.click();
        }, 2000);
    });
var timer = setInterval(function () {
        right.click();
    }, 2000);

 

 

 

文章标签：
JavaScript
前端开发
关键词：
JavaScript轮播图
JavaScript原生
她说她一如既往的爱我
目录
相关文章
游客dng4gjyb342he
|
13天前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作，底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
游客dng4gjyb342he
40 8
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
45 0
神明木佑
|
2月前
|
前端开发
js-基础轮播图制作
js-基础轮播图制作
神明木佑
34 7
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发
js轮播图练习
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的轮播图效果。通过`img`标签展示图片，并通过点击下方的点（`span`标签）切换图片。文章提供了完整的HTML结构、CSS样式和JavaScript代码，以及图片的展示和轮播图的效果图。
杀死一只知更鸟debug
25 1
js轮播图练习
Li370234940
|
2月前
|
JavaScript 前端开发
js轮播图有左右箭头和小点
js轮播图有左右箭头和小点
Li370234940
37 1
六卿
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏，包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑，提供了详细的代码和注释。
六卿
52 0
原生JavaScript+canvas实现五子棋游戏_值得一看
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
86 0
lvbb66
|
4月前
|
JavaScript
js轮播图制作
js轮播图制作
lvbb66
43 1
土木林森
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps：开发流程将迎巨变？一篇文章带你领略高效协同的魅力！
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces（JSF）开发中融入DevOps文化，通过持续集成与部署、自动化测试、监控与日志记录及反馈机制，提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法，并强调了持续改进的重要性。
土木林森
44 0
土木林森
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作，jQuery 与原生 JavaScript 完全指南，带你轻松掌握网页交互关键！
【8月更文挑战第31天】在网页开发中，表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入，都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单，包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性，但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
土木林森
43 0

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    【JavaScript】——JS基础入门常见操作（大量举例）
    22
  • 2
    Nginx 支持 JavaScript：前所未有的扩展
    18
  • 3
    带方向感知功能的js图片遮罩层插件
    42
  • 4
    如何使用Selenium处理JavaScript动态加载的内容？
    34
  • 5
    捕获键盘输入和输入组合键的js库hotkeys
    25
  • 6
    兼容移动手机的js拖拽插件Draggin.js
    24
  • 7
    页面滚动触发css3动画js插件
    41
  • 8
    JavaScript中的数据类型以及存储上的差别
    40
  • 9
    时尚简洁的js轮播图特效插件
    40
  • 10
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
    89

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 前端开发CSS基础
  • jQuery开发教程
  • CSS 快速掌握

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)