透明轮播原生JavaScript实现

分手后的思念是犯贱 2022-05-27 11:24 216阅读 0赞

**html代码**

<div id="box">
        <ul id="ul">
            <li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <ol id="ol">
            <li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ol>
    </div>

**css代码**

* {
                margin: 0;
                padding: 0;
            }
    
            #box {
                height: 500px;
                width: 800px;
                border: 1px solid #c0c0c0;
                position: absolute;
                margin: 100px auto;
                left: 100px;
            }
    
            ul {
                list-style: none;
                height: 100%;
                width: 100%;
            }
    
            ul > li {
                height: 100%;
                width: 100%;
                position: absolute;
                font-size: 30px;
                text-align: center;
            }
    
            ol {
                list-style: none;
                width: 100%;
                margin-top: 5px;
            }
    
            ol > li {
                height: 100px;
                width: 146px;
                margin-left: 8px;
                float: left;
                text-align: center;
                border: 1px solid #999999;
            }
    
            ol > li img {
                height: 100px;
                width: 146px;
                float: left;
            }

**JS代码 **

动画封装

function getStyle(ele, attr){
            if(ele.currentStyle){
                return ele.currentStyle[attr];
            }
            //一会回头再看看 null应该如何使用?
            return window.getComputedStyle(ele, null)[attr]
        }
    
        function animate(obj, json, callback) {
            //1.情况定时器
            clearInterval(obj.timer);
            //2.创建定时器
            obj.timer = setInterval(function () {
                // 新的位置=当前的位置+步长
                var flag = true;// 默认认为所有的 值 都完成了动画
                for (var key in json) {
                    var target = 0;//目标位置
                    var current = 0;//当前位置
                    if (key.toLowerCase() == "opacity") {
                        target = Math.round(json[key] * 100);
                        current = Math.round(getStyle(obj, key) * 100)
                    } else if (key != "zIndex") {
                        // height,width,left top
                        target = parseInt(json[key]);
                        current = parseInt(getStyle(obj, key));
                    }
                    //步长
    
                    if (key != "zIndex") {
                        //说明 不参与  zIndex 变化
                        var step = (target - current) / 10;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    }
    
                    // 新的位置=当前的位置+步长
                    if (key.toLowerCase() == "opacity") {
                        obj.style.opacity = (current + step) / 100;
                    } else if (key != "zIndex") {
                        obj.style[key] = current + step + "px";// height,width,left top
                    }
    
                    if (key == "zIndex") {
                        // 如果key== zIndex 直接给 对象赋值
                        obj.style.zIndex = Number(json[key]);
                    }
    
                    //关注哪些属性的动画还没完成
                    if (current != target) {
                        flag = false;
                    }
                }
    
                //如果for里面都没有任何属性需要改变 flag的状态,说明动画都完成了
                if (flag) {
                    clearInterval(obj.timer);
                    //动画完成后,通知或者做其他操作
                    //此处说明 callback就是一个函数
                    if (typeof(callback) == "function") {
                        callback(obj);//执行callback函数
                    }
                }
            }, 30)
        }

var ul = document.getElementById('ul');
        var ol = document.getElementById('ol');
        var lis = ul.children;
        var olls = ol.children;
        var timer = setInterval(autoPlay, 1500);
        var index = 0;
    
        function autoPlay() {
            index++; //
            if (index >= 5) {
                index = 0
            }
    
            for (var i = 0; i < lis.length; i++) {
                if (i == index) {
                    animate(lis[index], {"opacity": 1});
                    animate(olls[index], {"opacity": 1})
                } else {
                    animate(lis[i], {"opacity": 0});
                    animate(olls[i], {"opacity": 0.1})
                }
            }
    
            for (var i = 0; i < olls.length; i++) {
                olls[i].index = i;
                olls[i].onmouseenter = function () {
                    index = this.index;
                    index--;
                    clearInterval(timer);
                    autoPlay();
                };
                olls[i].onmouseleave = function () {
                    index = this.index;
                    index;
                    timer = setInterval(autoPlay, 1500);
                }
            }
    
            ul.onmouseenter = function () {
                clearInterval(timer);
            };
    
            ul.onmouseleave = function () {
                timer = setInterval(autoPlay, 1500);
            }
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JavaScript实现焦点图轮播

　　不管是高校的网站还是电商的页面，焦点图的切换和轮播应该是一项不可或缺的应用。今天把焦点图轮播制作的技术要点做下笔记，以供日后查看。一、结构层（HTML）　　焦

红太狼/ 2023年08月17日 17:45/ 0 赞/ 165 阅读

相关原生JavaScript轮播图效果实现

原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习。此部分代码系按原腾讯电脑管家首页的轮播图效果，采用原生JS技术予以实现（原网页采用j

不念不忘少年蓝@/ 2022年11月26日 12:56/ 0 赞/ 278 阅读

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 312 阅读

相关原生javascript实现图片轮播效果——续

在上一篇中只是简单的实现了[原生javascript实现图片轮播效果][javascript]中的自动播放和手动暂停，在这一篇中笔者加入了切换的动画效果、左右上下轮播可调、以及

左手的ㄟ右手/ 2022年08月23日 05:51/ 0 赞/ 230 阅读

相关原生javascript实现图片轮播效果

最近学习javascript实现动画效果，就用原生的javascript代码实现了图片轮播的效果，供大家参考学习。 1.首先设置图片轮播的地方（id=ban

淡淡的烟草味﹌/ 2022年08月23日 05:43/ 0 赞/ 254 阅读

相关原生javascript图片轮播实现

初学javascript，尝试着制作动画-图片轮播。（实现方法挺多）思路：添加多张图片，依次让图片显示。依次显示需要每隔一段时间去更新，因此选择了setInterv

柔情只为你懂/ 2022年06月09日 22:59/ 0 赞/ 314 阅读

相关透明轮播原生JavaScript实现

html代码 <div id="box"> <ul id="ul"> <li><a href="javascript:void

分手后的思念是犯贱/ 2022年05月27日 11:24/ 0 赞/ 217 阅读

相关用原生JavaScript实现无缝轮播

html代码 <div id="banner"> <ul> <li><img src="images/1.jpg"></li>

一时失言乱红尘/ 2022年05月27日 11:20/ 0 赞/ 255 阅读

相关用原生JavaScript实现简单轮播图

html代码 <div id="banner"> <ul> <li><img src="images/1.jpg"></li>

野性酷女/ 2022年05月27日 11:20/ 0 赞/ 245 阅读

相关原生js(JavaScript)实现图片轮播功能

先将目录结构图送上，然后再讲几个注意的地方。 ![70][] 其中最为关键的方法就是使用setInterval(fun,time)这个方法。其中该方法有两个参数，第一个参数

╰+攻爆jí腚メ/ 2022年05月20日 09:29/ 0 赞/ 269 阅读