JS透明度和水平轮播源码

最新推荐文章于 2022-09-26 21:14:30 发布
最新推荐文章于 2022-09-26 21:14:30 发布
阅读量181 收藏
点赞数
文章标签： JS透明度和水平轮播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hr226/article/details/106268940
版权
本文分享了如何使用JavaScript实现元素的透明度变化和水平轮播效果，包括关键代码实现、交互逻辑和优化技巧，适用于网页动态展示和用户体验提升。
摘要由CSDN通过智能技术生成

JS透明度轮播

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .slider {
            width: 700px;
            height: 400px;
            border: 5px solid crimson;
            position: relative;
        }

        .slider .list .item {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .slider .list .item:first-of-type {
            opacity: 1;
        }

        .slider .list .item img {
            width: 700px;
            height: 400px;
            display: block;
        }

        .slider .next,
        .slider .prev {
            position: absolute;
            top: 190px;
        }

        .slider .next {
            right: 0;
        }

        .slider .pagination {
            position: relative;
            top: 300px;
        }

        .slider .pagination .bullet {
            width: 20px;
            height: 20px;
            background-color: #000;
            margin-left: 5px;
            float: left;
            border: 2px solid yellow;
            cursor: pointer;
            color: white;
            line-height: 20px;
            text-align: center;
        }

        .slider .pagination .bullet.focus {
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="slider">
        <ul class="list">
            <li class="item"><img src="img(1).jpg" alt=""></li>
            <li class="item"><img src="img(2).jpg" alt=""></li>
            <li class="item"><img src="img(3).jpg" alt=""></li>
            <li class="item"><img src="img(4).jpg" alt=""></li>
        </ul>
        <button class="prev">prev</button>
        <button class="next">next</button>
        <ul class="pagination">
            <li class="bullet focus">1</li>
            <li class="bullet">2</li>
            <li class="bullet">3</li>
            <li class="bullet">4</li>
        </ul>
    </div>
    <script>
        function getStyle(el, property) {
            if (getComputedStyle) {
                return getComputedStyle(el)[property];
            } else {
                return el.currentStyle[property];
            }
        }
        function animate(el, properties) {
            clearInterval(el.timerId);
            el.timerId = setInterval(function () {
                for (var property in properties) {
                    var current;
                    var target = properties[property];
                    if (property === 'opacity') {
                        current = Math.round(parseFloat(getStyle(el, 'opacity')) * 100);
                    } else {
                        current = parseInt(getStyle(el, property));
                    }
                    var speed = (target - current) / 30;

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (property === 'opacity') {
                        el.style.opacity = (current + speed) / 100;
                    } else {
                        el.style[property] = current + speed + 'px';
                    }
                }
            }, 20)
        }
    </script>
    <script>
        (function () {
            var prevIndex, nextIndex;
            var len;
            var id;
            init();
            function init() {
                prevIndex = nextIndex = 0;
                len = document.querySelectorAll('.list .item').length;

                document.querySelector('.prev').onclick = function () {
                    sliderPrev();
                }

                document.querySelector('.next').onclick = function () {
                    sliderNext();
                }

                var bullets = document.querySelectorAll('.slider .pagination .bullet');
                for (var i = 0; i < bullets.length; i++) {
                    bullets[i].index = i;
                    bullets[i].onclick = function () {
                        prevIndex = nextIndex;
                        nextIndex = this.index;
                        sliderTo(prevIndex, nextIndex);
                    }
                }
                var slider = document.querySelector('.slider');
                slider.onmouseover = function () {
                    stop();
                }
                slider.onmouseout = function () {
                    auto();
                }
                auto();
            }
            function sliderPrev() {
                prevIndex = nextIndex;
                nextIndex--;
                if (nextIndex === -1) {
                    nextIndex = len - 1;
                }
                sliderTo(prevIndex, nextIndex);
            }
            function sliderNext() {
                prevIndex = nextIndex;
                nextIndex++;
                if (nextIndex === len) {
                    nextIndex = 0;
                }
                sliderTo(prevIndex, nextIndex);
            }
            function sliderTo(prev, next) {
                var lis = document.querySelectorAll('.list .item');
                var bullets = document.querySelectorAll('.slider .pagination .bullet');
                bullets[prev].className = 'bullet';
                bullets[next].className = 'bullet focus';
                animate(lis[prev], { opacity: 0 });
                animate(lis[next], { opacity: 100 });
            }
            function auto() {
                clearInterval(id);
                id = setInterval(function () {
                    sliderNext();
                }, 2000)
            }
            function stop() {
                clearInterval(id);
            }
        })()
    </script>
</body>

</html>

JS水平轮播

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .slider {
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        .slider .list {
            position: absolute;
        }

        .slider .list .item {
            width: 700px;
            height: 400px;
            float: left;
        }

        .slider .list .item img {
            width: 700px;
            height: 400px;
            display: block;
        }

        .slider .prev,
        .slider .next {
            position: absolute;
            top: 190px;
        }

        .slider .next {
            right: 0;
        }

        .slider .pagination .bullet {
            width: 20px;
            height: 20px;
            background-color: #000;
            margin-left: 5px;
            top: 300px;
            z-index: 999;
            position: relative;
            float: left;
            cursor: pointer;
        }

        .focus {
            background-color: yellow !important;
        }
    </style>
</head>

<body>
    <div class="slider">
        <ul class="list">
            <li class="item"><img src="img(1).jpg" alt=""></li>
            <li class="item"><img src="img(2).jpg" alt=""></li>
            <li class="item"><img src="img(3).jpg" alt=""></li>
            <li class="item"><img src="img(4).jpg" alt=""></li>
        </ul>
        <button class="prev">prev</button>
        <button class="next">next</button>
        <ul class="pagination">
            <li class="bullet focus"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
        </ul>
    </div>
    <script>
        function getStyle(el, property) {
            if (getComputedStyle) {
                return getComputedStyle(el)[property];
            } else {
                return el.currentStyle[property];
            }
        }
        function animate(el, properties) {
            console.log(el)
            clearInterval(el.timerId);
            el.timerId = setInterval(function () {
                for (var property in properties) {
                    var current;
                    var target = properties[property];
                    if (property === 'opacity') {
                        current = Math.round(parseFloat(getStyle(el, 'opacity')) * 100);
                    } else {
                        current = parseInt(getStyle(el, property));
                    }
                    var speed = (target - current) / 30;

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (property === 'opacity') {
                        el.style.opacity = (current + speed) / 100;
                    } else {
                        el.style[property] = current + speed + 'px';
                    }
                }
            }, 20)
        }
    </script>
    <script>
        (function () {
            var currIndex;
            var lis;
            var liWidth;
            var len;
            var id;
            init();
            function init() {
                currIndex = 1;
                var li_1 = document.querySelector('.slider .list .item:first-of-type');
                var copy_1 = li_1.cloneNode(true);
                var li_last = document.querySelector('.slider .list .item:last-of-type');
                var copy_last = li_last.cloneNode(true);

                var list = document.querySelector('.slider .list');
                list.appendChild(copy_1);
                list.insertBefore(copy_last, li_1);

                lis = document.querySelectorAll('.list .item');
                liWidth = lis[0].offsetWidth;
                len = lis.length;

                list.style.width = liWidth * len + 'px';
                list.style.left = -liWidth + 'px';

                document.querySelector('.prev').onclick = function () {
                    sliderPrev();
                }
                document.querySelector('.next').onclick = function () {
                    sliderNext();
                }

                var bullets = document.querySelectorAll('.slider .pagination .bullet');
                for (var i = 0; i < bullets.length; i++) {
                    bullets[i].index = i;
                    bullets[i].onclick = function () {
                        currIndex = this.index + 1;
                        sliderTo(currIndex);
                    }
                }

                document.querySelector('.slider').onmouseover = function () {
                    stop();
                }
                document.querySelector('.slider').onmouseout = function () {
                    auto();
                }
                auto();
            }
            function sliderNext() {
                currIndex++;
                sliderTo(currIndex);
            }
            function sliderPrev() {
                currIndex--;
                sliderTo(currIndex);
            }
            function sliderTo(index) {
                var list = document.querySelector('.slider .list');
                if (index === len) {
                    currIndex = index = 2;
                    list.style.left = -liWidth + 'px';
                }
                if (index === -1) {
                    currIndex = index = len - 3;
                    list.style.left = -(len - 2) * liWidth + 'px';
                }

                var focusIndex;
                var bullets = document.querySelectorAll('.pagination .bullet');
                if (index === 0) {
                    focusIndex = bullets.length - 1;
                } else if (index === len - 1) {
                    focusIndex = 0;
                } else {
                    focusIndex = index - 1;
                }
                document.querySelector('.focus').className = 'bullet';
                bullets[focusIndex].className = 'bullet focus';

                var left = -index * liWidth;
                animate(list, {
                    left: left
                })

            }
            function auto() {
                clearInterval(id);
                id = setInterval(function () {
                    sliderNext();
                }, 2000);
            }
            function stop() {
                clearInterval(id);
            }
        })()
    </script>
</body>

</html>

img(1).jpg
在这里插入图片描述
img(2).jpg
在这里插入图片描述
img(3).jpg
在这里插入图片描述
img(4).jpg
在这里插入图片描述

hr226
关注
html中轮播图的做法及源码
2301_80899969的博客
06-01 565
通过css样式来进行布局，让图片重复堆叠在同一块区域内通过opacity来调整透明度来进行显示，后面则主要通过javascript央视来进行调整，并实现其动态效果，前面通过其css样式中的绝对定位和相对定位来进行图片整体布局上的实现，同时通过一些特殊的样式如opacity，radius，nth-child等一系列的标签来实现其细节上的处理，用一句话来形容莫过于绝对定位和相对定位决定其大致框架，而一系列的特殊样式择决定了起细节，使其变得更加形象与生动，而js则主要起了动态处理的作用。
原生javaScript实现图片透明渐变轮播（代码）
2401_83915450的博客
03-29 227
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处即可获取！！！。讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）[外链图片转存中…(img-OoCe5WOu-1711692150001)][外链图片转存中…(img-H8mtd3Zu-1711692150001)]
3954549yu6-f
12-23
rsfkzlsgjja.04946-[2tjdlzdvmc/azfdgm x fsdfsh
HTML之轮播
chuozhuanyan0918的博客
03-30 339
最近学了网页多张图片的轮播，图片轮播对于大多数网页来说是必不可少的。 要实现的效果是：按下前、后按钮，显示的图片改变，按下 1 2 3 4 按钮会显示对应的图片，当鼠标移到图片外面，图片在每隔一定时间就变成另一张。 大概思路： 1.创建ul下4个li标签放到div标签，li标签里面放...
路漫漫其修远兮：js的成长经历（五）—— js animate动画基础
不愿意做鱼的小鲸鱼の博客
08-01 402
目录什么是animate封装animateanimate方法测试实现效果 什么是animate     js运动是我们学习js必不可少的研究部分，首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已，比如不断改变一个绝对定位div的left值，那么你看到的效果就是这个div不断的向右边运动，那么运动的原理就是这样。 我们知道从a这一点到b这一点我们的运动方式有很多， ...
路漫漫其修远兮：js的成长经历（八）——完美运动框架（新浪微博小案例）
不愿意做鱼的小鲸鱼の博客
08-03 211
目录什么是完美运动框架完美运动框架的实现animate原生代码小案例 —— 新浪微博发布消息代码实现效果 什么是完美运动框架 animate大家都很熟悉，完美运动框架就是能将自己封装好的animate能实现想要的运动效果，可以同时改变一个对象的各种属性，并且改变之后还能够实现接着需要改变的属性，即是运动，比如一个div盒子向有运动了一段距离，还能自己运动回来回来，就像是一链式运动，这种运动框架能解...
原生js实现轮播图（用位移和透明度两种方法）
m0_53394907的博客
09-26 349
很久没敲代码了，最近会时常更新。
原生JS轮播图
刘龙的博客
10-15 710
这次就不多说了,直接上代码了,刚才写的时候把注释都写到里边啦!~为了表现写代码思路,我写的过程用到的打印、测试都没有删除痕迹，只是做了注释。嘿嘿 html结构 ＜ ＞ *
js轮播图片小圆点变化_原生js实现轮播图的示例代码
weixin_39855186的博客
12-21 1168
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。原理：将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。步骤一：建立html基本布局如下所示：轮播图 12345<>只有五张图片，却使用7张来轮播，这是...
banner无缝轮播源码
11-26
常见的实现方式有复制首尾元素，当最后一张图片显示完后立即切换到第一张，或者通过改变图片的位置和透明度来实现视觉上的无缝过渡。 5. 兼容性考虑：由于不同的浏览器对CSS3和JavaScript的支持程度不同，开发者...
透明精美图片轮播的登录页面公开源码
11-06
通过分析这个公开源码，开发者不仅可以学习如何结合HTML、JavaScript和Bootstrap构建一个功能丰富的登录页面，还能了解如何实现图片轮播效果，以及如何通过透明度增强视觉效果。对于初学者来说，这是一个很好的实践...
js图片轮播源码很实用
12-07
在本实例中，我们提到的"js图片轮播源码"提供了一种实用的方法来实现这一功能，具有五种不同的过渡效果：渐进渐出（fadeIn和fadeOut）。 渐进渐出效果是CSS3和JavaScript中常用的一种平滑过渡方式，它使得元素在...
JS实现网页3D旋转轮播图的源代码
07-12
同时，透明度的变化也是增强3D感觉的一个重要因素，通过调整元素的`opacity`值，可以实现图片在进入和离开视线时的淡入淡出效果。 4. **事件监听与响应**： 项目中提到的左右箭头点击实现图片轮换，意味着开发者...
JQuery实现轮播图完整源码
09-13
3. **动画效果**：jQuery的`.animate()`方法允许我们创建平滑的过渡动画，用于改变元素的CSS属性，如位置、大小、透明度等，使得轮播图的切换更加自然流畅。 4. **定时器**：使用`setInterval()`函数可以设置定时...
带后台管理的超酷jquery+ajax幻灯相册php源码,js幻灯片轮播代码_js源码_js鼠标滚动翻页...
weixin_42227109的博客
03-09 295
效果不错的一款js幻灯片特效代码，支持3D立体效果轮播，带左右箭头按钮控制幻灯图播放，支持幻灯图标题，js代码简单易改，比用flash幻灯特效好用得多，自行修改也容易。模仿3D立体切换效果的js焦点幻灯图片特效代码2012-07-30带标题和简要右侧缩略图的经典四屏轮播JS幻灯片代码一款很实用四屏轮播JS幻灯片代码，右侧带缩略小图显示和文字简要，也支持幻灯图片标题，有多种不同的幻灯片过渡特效。20...
基于双区间熵重映射的图像对比度增强方法研究
11-08
内容概要：该论文介绍了一种基于双区间熵重映射的图像对比度增强方法。文中详细解释了方法的数学原理及其在图像处理中的应用，特别是如何有效地提高低对比度图像的对比度，同时对高对比度图像的变换则相对平滑。实验证明该方法不仅提高了图像的视觉效果，还能结合Gabor滤波器进一步提升增强效果。 适合人群：从事图像处理和计算机视觉领域的研究人员和技术人员，以及对图像对比度增强技术感兴趣的学术界人士。 使用场景及目标：适用于需要提高数字图像对比度的各种应用场景，尤其是在图像处理和计算机视觉任务中。目的是提高图像质量，更好地识别和分析图像内容。 其他说明：该方法不仅在对比度增强方面表现优异，还在保持图像原有细节和减少噪声方面显示出优势。通过对多种经典测试图像的评估，证明了其优越性和普适性。
软考知识点-系统架构设计师-计算机网络与软件工程关键技术综述
11-08
内容概要：本文涵盖了多个领域的关键技术和概念，主要包括PaaS、SaaS、IaaS等云计算服务模式；数据库的三级模式（外模式、模式、内模式）；AI芯片的技术架构（GPU、FPGA、ASIC、类脑芯片等）；DNS配置和管理在Linux、Unix、macOS和Windows中的差异；网络和服务器延迟的定义及组成部分；软件需求开发、软件过程、软件活动和软件设计的关键步骤；信息屏蔽的概念及应用；构件分类；中间件的功能；C/S架构的不同层次及特征；Kerberos认证协议的工作原理和优缺点。每部分内容均简明扼要地介绍了相关概念和技术的特点和应用。 适合人群：具备一定技术背景的研究人员、开发人员和系统管理员。 使用场景及目标：适用于希望深入了解计算机网络、软件工程和信息安全领域的从业人员，可用于指导技术选型、系统设计和安全防护等方面的工作。 阅读建议：本文内容丰富，涵盖多个领域，建议在阅读时重点关注自己感兴趣的领域，并结合实际情况进行深入研究和实践。
农家乐内部管理系统 SSM毕业设计 附带论文.zip
最新发布
11-08
农家乐内部管理系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
JS实现波浪动画图片轮播特效源码解析
通过上述知识点的阐述，可以看出，JS基于CSS3实现图片波浪动画切换轮播特效的源码集成了多个前端开发领域的核心概念和技术，包括CSS3动画、JavaScript交互控制、轮播图实现原理、兼容性问题处理、资源管理以及项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值