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

于 2024-01-20 09:05:19 发布
阅读量520 收藏 10
点赞数 9
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62980497/article/details/135710865
版权

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

<!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);

 

 

 

她说她一如既往的爱我
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片轮播 js原生(淡入淡出)
05-20
图片轮播 js原生(淡入淡出)
原生JS实现淡入淡出轮播图
weixin_42678796的博客
01-19 283
不依赖任何插件 效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淡入淡出轮播图</title> <style> *{
原生JS实现图片轮播--淡入淡出
nrskhdzl的博客
08-19 794
本篇博客所实现的图片轮播是较为简单的一种轮播，轮播效果为固定的位置不同图片的切换，所以首先需要对页面进行简单的布置 HTML部分 <div class="b"> <div class="btn"> <span class="btn_left"><</span> <span class="btn_ri...
原生js实现轮播图-滑入滑出效果
qq_43266440的博客
10-22 807
滑入滑出轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
js轮播（淡入淡出特效）
06-22
HTML+Js+ccs，轮播图，淡入，淡出，满屏设置 尺寸可以该，适用于网站banner 广告宣传等，下载就用 原理简单
原生js简约风格轮播图切换代码.zip
07-11
本资源“原生js简约风格轮播图切换代码”提供了一种使用JavaScript实现的简单、高效的轮播图解决方案，特别适用于那些希望避免依赖大型库如jQuery，追求轻量级、高效性能的开发者。 轮播图的核心功能包括自动切换、...
javascript原生封装一个淡入淡出效果的函数测试实例代码
11-26
所以，我简单的研究了一下纯js代码写淡入淡出的效果。 如果出现错误，请在评论中指出，我也好自己纠正自己的错误   （一）FadeIn淡入函数 淡入淡出的效果，其实就是一个setInterval()，加上循环的DOM操作，通过改变...
原生js实现底部带缩略图的图片淡入淡出切换特效源码.zip
11-10
这个压缩包"原生js实现底部带缩略图的图片淡入淡出切换特效源码.zip"提供了一个使用纯JavaScript实现的图片切换功能，它带有底部的缩略图导航，并且在切换时有淡入淡出的效果。下面我们将详细探讨这一技术实现。 ...
js代码qq腾讯视频网站焦点图片轮播切换
11-17
【标题】"js代码qq腾讯视频网站焦点图片轮播切换"涉及到的是JavaScript技术在实现网页动态效果中的应用，特别是焦点图轮播切换的功能。在腾讯视频网站上，这种功能能够吸引用户注意力，提升用户体验，展示最新的视频...
arcgis api for js实现动态切换底图（淡入淡出效果）
05-05
在GIS领域，ArcGIS API ...通过以上步骤，你可以利用ArcGIS API for JavaScript 实现动态切换底图并加入淡入淡出效果，使得地图应用更加生动和专业。记得在实际开发中根据项目需求进行调整和优化，确保用户体验流畅。
原生js实现轮播图（左右活动+淡入淡出）详解.zip
04-10
功能：通过修改创建对象时的参数，可实现左右滑动轮播图或者淡入淡出轮播图 两种模式的区别主要体现在两种模式的不同布局与样式，具体详解请看代码注释。 此轮播图的前提是已经写好了html结构，结构上可适当增加图片标签 img ，那么也要随之增加对应的 li 标签以及创建对象时的链接数组。
js图片渐变轮换特效
04-29
自己刚学js时候写的东西。代码比较简单。
原生JS实现图片轮播与淡入
zerlinda_c的博客
12-14 5462
最近对css的兴趣提不起来，因为以前对图片轮播一直耿耿于怀苦于学艺不精，所以，花了点时间熟悉了一下js。然后一条道走到黑，用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长，希望自己在前端的路上越走越远`(∩_∩)′ 　　 　　从原理来讲，网上的教程有很多，简单来说。 　　 　　淡入淡出，其实这里只用到了淡入的效果。每一张淡入的图片，我们将它的display设置为block，
【原生js】【轮播图系列】三种方式实现淡入淡出效果之js代码实现
知识记录站
06-08 1952
【原生js】【轮播图系列】淡入淡出效果实现之js代码实现0、效果图1、第一种方式-实现自动轮播2、第二种方式-实现鼠标滑过显示指定图片2.1 解决方案1-利用闭包将i的值传入2.2 解决方案2-通过添加对象属性把i值传入3、第三种方式-实现点击左右箭头显示指定图片 0、效果图 点击我查看HTML+CSS实现代码 1、第一种方式-实现自动轮播 实现的原理：首先我们的图片是有顺序的（参考li标签的顺序），而我们的自动播放实际上也是按照顺序进行图片切换，所有我们需要动态调整的其实是用于显示图片的class属性“
原生js实现渐出渐入式（呼吸式）轮播图【含完整代码】
qq_40261601的博客
02-20 933
原生javascript实现图片的渐出渐入式轮播。使多张图片层叠在一起，结合定时器，在切换图片时改变相邻图片的透明度，从而实现渐变轮播效果。
js的图片渐渐入渐渐出的效果(html逻辑 css逻辑 js逻辑))
qq_37805832的博客
10-19 1695
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{padding: 0px;margi
原生javascript实现图片轮播效果——续
shoushou71的博客
06-10 1966
在上一篇中只是简单的实现了原生javascript实现图片轮播效果中的自动播放和手动暂停，在这一篇中笔者加入了切换的动画效果、左右上下轮播可调、以及切换图片计数功能。 在html中加入一个div，作为图片计数用处，同样css参见给出的源码。 其次在封装的库函数中加入设置动画的animate()函数，源码如下 Base.prototype.animate = function
js实现图片淡入淡出
sweetllh的博客
04-25 2685
效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00)<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
javascript实现流行的淡入淡出相册
shane1986的专栏
06-25 574
<br />运用脚本javascript在网页上实现多张图片按一定时间轮流淡入和淡出的效果，并且加入多个div对象事件控制当前图片。思路：通过建立一图片数组预放置需要的图片，建立更替图片函数，通过滤镜blendTrans实现淡入淡出的效果，插入document.getElementById('apDiv1').onclick控制当前图片。下面是具体的代码与注释：<br /><html ><br /><head><br /><title>abc</title><br /><script language="j
用html，css和原生js写一个轮播图，图片切换时有淡入淡出效果
最新发布
02-26
好的，以下是一个用HTML，CSS和JavaScript编写的简单轮播图，其中图片切换时包含淡入淡出效果的实现： HTML： ```html (-1)">❮ (1)">❯ ``` CSS： ```css .slideshow-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值