透明度轮播图ES6面向对象的写法

最新推荐文章于 2020-03-16 22:21:31 发布

clqxmt

最新推荐文章于 2020-03-16 22:21:31 发布

阅读量189

点赞数

分类专栏： JS中的案例文章标签：透明度轮播图ES6面向对象的写法

本文链接：https://blog.csdn.net/weixin_43755513/article/details/100674155

版权

JS中的案例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>透明图片轮播3</title>
    <style>
         html,body{
            margin:0; padding:0; text-align:center;
        }
        #container{
            width:782px; height:400px; border:solid 3px #ccc; margin:0 auto;
        }
        #container div:nth-child(1) img{
            opacity:0.2;
        }
        #container div:nth-child(2) img{
            float:left; height:60px; margin:3px; padding-left:5px;
        }
    </style>
    <script type="text/javascript">
        class Opacity{
            constructor(){//类中的属性写在构造器中
                this.timer=0;
            }
            createEle(_body){
                let _div=document.createElement("div");
                _body.appendChild(_div);
                _div.id="container";
                let _child=document.createElement("div");
                _div.appendChild(_child);
                let _img=document.createElement("img");
                _child.appendChild(_img);
                _img.src="images/_01.jpg";
                _child=document.createElement("div");
                _div.appendChild(_child);
                for(let i=0;i<5;i++){
                    _img=document.createElement("img");
                    _child.appendChild(_img);
                    _img.src="images/_0"+(i+1)+".jpg";
                }
            }
            next(_big){
                // console.log(this);
                // clearInterval(this.timer);
                let url=_big.src.match(/\d\.jpg/)[0].replace(".jpg","");
                if(Number(url)>=5){
                    url=0;
                }else{
                    url=Number(url);
                }
                _big.src="images/_0"+(url+1)+".jpg";
                this.opacity(_big);
            }
            opacity(_big){
                let _me=this;//把此处的this保存下来,此处this指向_opacity
                let _o=0.2;
                this.timer=setInterval(function(){
                    _big.style.opacity=(_o+=0.08);
                    if(_o>=8){
                        clearInterval(_me.timer);
                        _me.next(_big);//如果在这里直接使用this，this会指向this.timer,而不是指向对象_opacity
                    }
                },30);
            }
            events(_hgroup){
                let _me=this;
                for(let i=0;i<_hgroup.children.length;i++){
                    _hgroup.children[i].onmouseover=function(){
                        _hgroup.parentNode.children[0].children[0].src=this.src;
                        clearInterval(_me.timer);
                        _me.opacity(_hgroup.parentNode.children[0].children[0]);
                    }
                }
            }
        }
        function main(){
            var _body=document.getElementsByTagName("body")[0];
            let _opacity=new Opacity();
            _opacity.createEle(_body);
            _opacity.opacity(_body.children[0].children[0].children[0]);
            _opacity.events(_body.children[0].children[1]);
        }
        window.onload=main;
    </script>
</head>
<body>
    
</body>
</html>

clqxmt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
透明度轮播图ES6面向对象的写法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫