原生JS实现呼吸轮播图

2024-09-29 12:27:03

今天给大家分享一个用原生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];
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript仿小米轮播图效果

本文是自己仿写的小米轮播图的写法,通过透明度改变进行轮播的,新手,写的可能不是很好,有啥不合理的情况,望提出,指正,全部的代码放最下面有很多写法重复,有空的时候,我把重复的代码封装一下关于透明度渐变的动画效果比如 delayOpacity(OliArray[pre],0,-0.1); 就是将OliArray[pre]这个对象的透明度转换成0,速度为0.1 function delayOpacity(obj,target,speed){ clearInterval(timer); timer
js制作轮播图效果

轮播图在前端开发中我认为是一个比较重要的点,因为包含了很多原生js知识点,以下是我学习制作轮播图的过程难点: 1.如何让底下圆圈和图片所对应自动动态生成 2.如何让底下圆圈和图片所对应的起来 3.上一页和下一页所在盒子所移动的距离 4.图片切换时的渐出动画效果 5.节流阀的概念效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
关于JavaScript轮播图的实现

今天又是一个非常实用的案例哟,听名字就觉得高级很难对吧,今天就来写一个案例,让你轻松学到轮播图的精髓!! 还是老规矩,来看一下实现效果!! 学习轮播图的首先是要把图片准备好,并且用 ul 的里面的 li 包起来,给 li 一个浮动,让他们显示在一行上,但是注意了,一定要给 ul 足够的宽哦!! 来吧,html 和 css 代码如下所示(文件名:index.html) <!DOCTYPE html> <html lang="en"> <head> &l
js实现3D轮播图效果

本文实例为大家分享了js实现3D轮播图效果的具体代码,供大家参考,具体内容如下主要有平移和旋转构成3d效果的轮播图,小白一只,不足之处还请大家多多指教,代码如下 css代码: *{ padding: 0; margin: 0; } .box{ position: relative; width: 100%; height: 100%; top: 200px; margin: auto; } .warpper{ position: absolute; width: 100%; height: 1
JS实现轮播图效果的3种简单方法

本文实例为大家分享了3种方法实现JS轮播图效果的具体代码,供大家参考,具体内容如下 Js实现轮播图01 实现思路这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg-,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果.代码如下: 实现效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q
JS实现轮播图小案例

本文实例为大家分享了JS实现轮播图小案例的具体代码,供大家参考,具体内容如下分析: 点击左右箭头滑动轮播图鼠标不在轮播图内时每隔2秒自动滑动轮播图鼠标移入时停止自动滑动轮播图点击小圆圈显示对应的轮播图 1.鼠标移入.移出显示或隐藏左右箭头: // 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r')
纯js实现轮播图效果

本文实例为大家分享了js实现轮播图效果的具体代码,供大家参考,具体内容如下结合我们前面学过的:鼠标监听事件(移入移出.点击),创建节点,排他思想.定时器等,就可以实现一个能手动和自动播放的轮播图效果图代码 1. css /*清除元素默认的内外边距 */ * { margin: 0; padding: 0 } body{ width: 1000px; margin: 0 auto; } /*去掉列表前面的小点*/ li { list-style: none; } /*图片没有边框去掉图片底
原生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 {
原生JS实现的轮播图功能详解

本文实例讲述了原生JS实现的轮播图功能.分享给大家供大家参考,具体如下: 一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2..prev存放向左的箭头,.next存放向右的箭头: 3.pointer意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示: 4..m-view,意为视窗,即每次看到图片的窗口,它存放以上所有的部件: (二)CS
原生JS运动实现轮播图

原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到最后一张时,将ul的left值设为0,即可达到图片无线轮播的效果. 运动函数的实现函数需传入元素(即需要参与运动的元素).目标值(以对象的形式呈现,如{left: 300}).callback(回调函数). //多物体多值运动+回调机制 function startMove(dom, attrOb
原生js实现无缝轮播图

本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下先上效果图原理图如图可见,是页面按顺序依次显示5张图片,包裹这五张图片的外层的盒子,我们叫ul,通过向左或右移动不同距离,实现在视图中显示的不同的图片,实现轮播,而同时下面的分页小球需要根据当前显示的内容进行点亮: 而无缝轮播图需要在第五张图片后面再加上第一张图片,这样通过右侧箭头,向右切换,当页面切换到第六张时,也就是最后一张图片,此时需要将ul的位置设置为第一张图的位置,然后从第一张图片滑动到第二张,形成一个无缝
原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: 初始化: 包括外边距margin.内边距padding.链接a.图片img.输入框input.列表ul.li.网页html.body一系列初始化 css设置: 根据图片数与图片宽度设置轮播图宽度二.设置js逻辑需要完成的功能有: 1.鼠标移入轮播图逐渐出现左右浮动块 2.点击浮动块切换图片 3
原生js实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul
原生js实现焦点轮播图效果

原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图 2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index 3.间隔调用与无限轮播. 4.注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行 5.另外在切换图片的时候,底部的Button动画效果,是从底部开始往上升的,要用到transform:scale()和transform-origin:0 100%两个转换属性,代码如下 <!DOCTYPE html> <html&g
原生js实现无缝轮播图效果

话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima
原生js实现3D轮播图

3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求: 和其它图片轮播大体一致,无非就是点击按钮向左.右翻页,点击下方提示位置小点切换到小点表示对的位置页(我是真的不知道那个小点叫什么名字,大家将就着听吧) 上代码: 基本代码: <!DOCTYPE html> <html lang="en"> <head>
原生JS实现层叠轮播图

又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wtf</title> </head> <body> <div class="container"> <div class="box&quo

原生JS实现呼吸轮播图

相关推荐

随机推荐