JavaScript原生淡入淡出轮播图

最新推荐文章于 2021-06-21 13:26:22 发布

rc980209

最新推荐文章于 2021-06-21 13:26:22 发布

阅读量273

点赞数

文章标签：轮播图淡入淡出轮播图面向对象淡入淡出轮播图

本文链接：https://blog.csdn.net/weixin_43318297/article/details/87904526

版权

<!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>Document</title>
</head>
<style>
*{
    margin: 0px ;padding: 0px;
}
#ul{
    width: 1200px;height: 470px;margin: 0px auto;margin-top: 100px;position: relative;
    background: pink;
}
#ul>li{
    list-style: none;width: 100%;height: 100%;position:absolute;left: 0px;top: 0px;opacity: 0;transition: 2s; filter:alpha(opacity=0); 
}
#childul{
    width: 200px;height: 20px;position: absolute;left: 50%;top: 90%;transform: translateX(-50%);
}
#childul>span{
    list-style: none;width: 12px;height: 12px;border-radius:50%;border: 1px solid white;float:
     left;margin-left: 30px;display:block;
}
.showspan{
    background:#ccc;
}

div{
    width: 40px;height: 80px;position: absolute;top: 50%;transform: translateY(-50%);font-size: 20px;
    text-align: center;line-height: 80px;color: #ccc;background: #333;opacity: 0.2;cursor:pointer;
}
.left{
    left: 0%
}
.right{
   right: 0%
}
</style>
<body>
    <ul id="ul">
        <li class="show" style="opacity:1"><img src="../images/01.jpg" alt="小米之家" height="470" width="1200"></li>
        <li><img src="../images/02.jpg" alt="小米之家" height="470" width="1200"></li>
        <li><img src="../images/03.jpg" alt="小米之家" height="470" width="1200"></li>
        <li><img src="../images/04.jpg" alt="小米之家" height="470" width="1200"></li>
        <ul id="childul">
            <span class="showspan"></span>
            <span></span>
            <span></span>
            <span></span>
        </ul>
        <div class="left">&gt;</div>
        <div class="right">&lt;</div>
    </ul>
</body>
<script>
    

function $(dom){                 //获取节点
    if(dom.substring(0,1)=='#' || dom.substring(0,1)=="."){
        return document.querySelector(dom)
    }else{
        return document.querySelectorAll(dom)
    }
}
var bannerevent={
    ul:$('#ul'),
    li:$('li'),
    span:$('span'),
    childul:$('#childul'),
    left:$('.left'),
    right:$('.right'),
    locations:0,
    itime:null,
    execute:function(){     //
        this.self_motion();
        this.addindex();
        this.spanclick();
        this.leftclick();
        console.log(this.left);
        this.rightclick()
    },
    self_motion:function(){ //自动轮播
        var self=this;
        itime=setInterval(function(){
            self.locations++;
            if(self.locations>self.li.length-1){
                self.locations=0
            }
            for(var i=0;i<self.li.length;i++){
                self.li[i].style.opacity=0;
                self.li[i].style.filter='alpha(opacity=0)'; 
                self.span[i].className=''
            };
            self.li[self.locations].style.opacity=1;
            self.li[self.locations].style.filter='alpha(opacity=100)'; 
            self.span[self.locations].className='showspan'
        },2000)
    },
    addindex:function(){  //添加自定义属性
        for(var i=0;i<this.span.length;i++){
            this.span[i].setAttribute('index',i);
        }
    },
    spanclick:function(index){ //单击小圆点事件
        var self=this; 
        this.childul.onclick=function(e){  //事件委托
            e=e||window.event;
            var target=e.target ||e.srcElement;
            if(target.nodeName=='SPAN'){
                clearInterval(itime);
                for(var i=0;i<self.li.length;i++){
                    self.li[i].style.opacity=0;
                    self.li[i].style.filter='alpha(opacity=0)'; 
                    self.span[i].className='';
            };
            self.li[target.getAttribute('index')].style.opacity=1;
            self.li[target.getAttribute('index')].style.filter='alpha(opacity=100)'; 
            self.span[target.getAttribute('index')].className='showspan';
            self.locations=target.getAttribute('index');
            self.self_motion(); 
            }
        }
    },
    clickmove:function(){      //左右切换点击事件
        var self=this;
            for(var i=0;i<self.li.length;i++){
                    self.li[i].style.opacity=0;
                    self.li[i].style.filter='alpha(opacity=0)'; 
                    self.span[i].className=''
            };
            self.li[self.locations].style.opacity=1;
            self.li[self.locations].style.filter='alpha(opacity=100)'; 
            self.span[self.locations].className='showspan';
            self.self_motion(); 
    },
    leftclick:function(){   //左切换点击事件
        var self=this;
      
        this.left.onclick=function(){ 
             console.log(1)
            clearInterval(itime);
            self.locations--;
            if(self.locations<0){
                self.locations=self.li.length-1
            };
            self.clickmove();
           
            
        }
    },
        rightclick:function(){ //右切换点击事件
        var self=this;
        this.right.onclick=function(){
            clearInterval(itime);
            self.locations++;
            if(self.locations>self.li.length-1){
                self.locations=0
            }
            self.clickmove();
            
            
        }
    }

}
bannerevent.execute()   //执行bannerevent对象下的execute函数
</script>

</html>

效果图:实际效果图参考小米官网
在这里插入图片描述

rc980209

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript原生淡入淡出轮播图

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&a
复制链接

扫一扫