注册有礼

用原生JS做呼吸轮播图的方法及代码是什么

Admin 2022-06-24 群英技术资讯 319 次浏览

上一篇：使用JavaScript实现楼层导航的方法及过程是什么 下一篇：vue中插槽的分类有几种，用法是什么
今天这篇给大家分享的知识是“用原生JS做呼吸轮播图的方法及代码是什么”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“用原生JS做呼吸轮播图的方法及代码是什么”文章能帮助大家解决问题。


今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下：

以下是代码实现，欢迎大家复制粘贴。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>原生JS实现呼吸轮播图</title>
    <style>
        ul {
            margin: 0;
            padding-left: 0;
        }
 
        li {
            list-style: none;
        }
 
        img {
            border: none;
        }
 
        #main {
            width: 280px;
            height: 330px;
            overflow: hidden;
            position: relative;
            margin: 20px auto 0 auto;
        }
 
        #main ul {
            position: absolute;
            left: 0;
        }
 
        #main ul li {
            width: 280px;
            height: 330px;
            float: left;
            position: absolute;
            filter: alpha(opacity=0);
            opacity: 0;
        }
 
        #btn {
            line-height: 14px;
            text-align: center;
            background: #eeeeee;
            width: 280px;
            margin: 10px auto 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }
 
        #btn a {
            display: inline-block;
            width: 14px;
            height: 14px;
            text-decoration: none;
            line-height: 12px;
            text-align: center;
            border-radius: 7px;
        }
 
        #btn a.index {
            background-color: #ccc;
        }
 
        #btn a.active {
            background-color: red;
        }
    </style>
    <script type="text/javascript" src="js/move.js"></script>
    <script>
        window.onload = function () {
            var oMain = document.getElementById('main');
            var oUl = oMain.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
 
            var oBtn = document.getElementById('btn');
            var aA = oBtn.getElementsByTagName('a');
 
            var iNow = 1;
            var iNow2 = 1;
            var bBtn = true;
            var num = 3;
            var timer = null;
 
            oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
 
            aA[0].onclick = function () {
                if (bBtn) {
                    clearInterval(timer);
                    timer = setInterval(autoPlay, 3000);
                    for (var i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'relative';
                        aLi[i].style.filter = 'alpha(opacity=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    if (iNow == 1) {
                        iNow = aLi.length;
                        aLi[aLi.length - 1].style.position = 'relative';
                        aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px';
                    } else {
                        iNow--;
                    }
                    iNow2--;
                    toRun();
                    bBtn = false;
                }
            };
            aA[aA.length - 1].onclick = function () {
                if (bBtn) {
                    clearInterval(timer);
                    timer = setInterval(autoPlay, 3000);
                    for (var i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'relative';
                        aLi[i].style.filter = 'alpha(opacity=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    if (iNow == aLi.length) {
                        iNow = 1;
                        aLi[0].style.position = 'relative';
                        aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
                    } else {
                        iNow++;
                    }
                    iNow2++;
                    toRun();
                    bBtn = false;
                }
            };
 
            for (var i = 1; i < aA.length - 1; i++) {
                aA[i].index = i;
                aA[i].onclick = function () {
                    clearInterval(timer);
                    timer = setInterval(autoPlay, 3000);
                    iNow = this.index;
                    iNow2 = this.index;
                    toShow();
                };
            };
 
            function toRun() {
                for (var i = 1; i < aA.length - 1; i++) {
                    aA[i].className = 'index';
                }
                aA[iNow].className = 'active';
 
                startMove(oUl, { left: -(iNow2 - 1) * aLi[0].offsetWidth }, function () {
                    if (iNow == 1) {
                        aLi[0].style.position = 'relative';
                        aLi[0].style.left = 0;
                        oUl.style.left = 0;
                        iNow2 = 1;
                    } else if (iNow == aLi.length) {
                        aLi[aLi.length - 1].style.position = 'relative';
                        aLi[aLi.length - 1].style.left = 0;
                        oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px';
                        iNow2 = aLi.length;
                    }
 
                    for (var i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'absolute';
                        aLi[i].style.filter = 'alpha(opacity=0)';
                        aLi[i].style.opacity = 0;
                    }
                    oUl.style.left = 0;
                    aLi[iNow2 - 1].style.zIndex = num++;
                    aLi[iNow2 - 1].style.filter = 'alpha(opacity=100)';
                    aLi[iNow2 - 1].style.opacity = 1;
 
                    bBtn = true;
                });
            };
 
            function toShow() {
                for (var i = 1; i < aA.length - 1; i++) {
                    aA[i].className = 'index';
                }
                for (var i = 0; i < aLi.length; i++) {
                    startMove(aLi[i], { opacity: 0 });
                }
                aA[iNow].className = 'active';
                startMove(aLi[iNow - 1], { opacity: 100 }, function () {
                    aLi[iNow - 1].style.zIndex = num++;
 
                });
            }
 
            timer = setInterval(autoPlay, 3000);
 
            function autoPlay() {
                if (iNow == aLi.length) {
                    iNow = 1;
                    iNow2 = 1;
                } else {
                    iNow++;
                    iNow2++;
                }
 
                toShow();
            }
        };
    </script>
</head>
 
<body>
    <div id="main">
        <ul>
            <li style="z-index:2; filter:alpha(opacity=100); opacity:1;">
                <a>
                    <img src="images/0.jpg" />
                </a>
            </li>
            <li>
                <a>
                    <img src="images/1.jpg" />
                </a>
            </li>
            <li>
                <a>
                    <img src="images/2.jpg" />
                </a>
            </li>
            <li>
                <a>
                    <img src="images/3.jpg" />
                </a>
            </li>
        </ul>
    </div>
    <div id="btn">
        <a class="prev" href="javascript:;">
            <</a> <a class="active" href="javascript:;">
        </a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="next" href="javascript:;">></a>
    </div>
</body>
 
</html>

以下是上面代码中引入的最重要的运动函数 move.js的代码：

function startMove(obj, json, fnEnd) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        doMove(obj, json, fnEnd);
    }, 30);
}
function doMove(obj, json, fnEnd) {
    var iCur = 0;
    var attr = null;
    var bStop = true;
    for (attr in json) {
        if (attr == 'opacity') {
            if (parseInt(100 * getStyle(obj, attr)) == 0) {
                iCur = parseInt(100 * getStyle(obj, attr));
            } else {
                iCur = parseInt(100 * getStyle(obj, attr)) || 100;
            }
        } else {
            iCur = parseInt(getStyle(obj, attr)) || 0;
        }
        var iSpeed = (json[attr] - iCur) / 5;
        iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if (json[attr] != iCur) {
            bStop = false;
        }
        if (attr == 'opacity') {
            obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
            obj.style.opacity = (iCur + iSpeed) / 100;
        } else {
            obj.style[attr] = iCur + iSpeed + 'px';
        }
    }
    if (bStop) {
        clearInterval(obj.timer);
        if (fnEnd) {
            fnEnd.call(obj);
        }
    }
}
function stopMove(obj) {
    clearInterval(obj.timer);
}
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj)[attr];
    }
}

到此这篇关于“用原生JS做呼吸轮播图的方法及代码是什么”的文章就介绍到这了,更多相关用原生JS做呼吸轮播图的方法及代码是什么内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！ 群英智防CDN，智能加速解决方案
标签： js呼吸轮播图

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：使用JavaScript实现楼层导航的方法及过程是什么 下一篇：vue中插槽的分类有几种，用法是什么

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服