js 淡入淡出轮播图

<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}

.banner {
width: 600px;
height: 430px;
margin: 80px auto;
overflow: hidden;
position: relative;
border: solid 1px;
}

.imglist {
width: 430px;
margin: 0 auto;
}

.imglist a {
position: absolute;
left: 14%;
top: 0;
opacity: 0;
transition: 1s;
}
#nav .activ{
opacity: 1;

}
.a {
position: absolute;
top: 50%;
width: 42px;
height: 72px;
line-height: 72px;
background: #000000;
color: #FFFFFF;
border-radius: 2px;
font-size: 50px;
text-align: center;
cursor: pointer;
}

.left {
left: 3%;
}

.right {
right: 5%;
}

.linelist {
position: absolute;
left: 31%;
top: 92%;
}
.linelist .a-activ{
background: #FFFFFF;
}
.linelist a {
width: 24px;
height: 24px;
border-radius: 50%;
background: #000000;
display: inline-block;
margin-left: 10px;
}
</style>
</head>


<body>
<div class="banner">
<div class="imglist" id="nav">
<a class="activ"><img src="img/1.jpg" /></a>
<a><img src="img/2.jpg" /></a>
<a><img src="img/3.jpg" /></a>
<a><img src="img/4.jpg" /></a>
<a><img src="img/5.jpg" /></a>
</div>
<a class="left a">
<</a>
<a class="right a">>
<</a>
<div class="linelist">
<a class="a-activ"></a>
<a></a>
<a ></a>
<a></a>
<a></a>
</div>
</div>
</body>
         
         <script>
          var oLeft=document.querySelector('.left');// 获取左按钮
          var oRight=document.querySelector('.right');// 获取右按钮
          var oImg=document.querySelectorAll('.imglist a'); // 获取图片
          var oa=document.querySelectorAll('.linelist a');//获取原点
          var idenx=0; //图片下标
          var lastindex=0;//原点下标
          var leng=oImg.length;// 图片长度
          var timer=0; //定时器
          //左按钮
          oLeft.οnclick=function(){
          chage(function(){
          idenx--;
          if(idenx<0)idenx=leng-1;
          })
          }
          //右按钮
          oRight.οnclick=function(){
          auto()
          }
         
          function auto(){
          chage(function(){
          idenx++;
          idenx%=leng;
          })
          }
          function chage(callback){
          //删除类名
          oImg[idenx].classList.remove('activ');
          oa[lastindex].classList.remove('a-activ');
            //下标变化;
            callback && callback();
            //赋值
              lastindex= idenx;
              //添加类名
          oImg[idenx].classList.add('activ');
          oa[lastindex].classList.add('a-activ');
          }
          //自动
          chaga()
            function chaga(){
            timer=setInterval(auto,3000)
            }
            //原点事件
            for (var i=0;i<oa.length;i++) {
            oa[i].index=i;
            oa[i].οnclick=function(){
            var oThis=this.index;
            chage(function(){
            idenx=oThis
            })
            }
            }
            </script>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值