JS原生面向对象淡入淡出轮播图
<!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">></div>
<div class="right"><</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>
效果图:实际效果图参考小米官网