淡入淡出轮播图

最新推荐文章于 2022-04-06 22:28:32 发布

_蒹葭苍苍

最新推荐文章于 2022-04-06 22:28:32 发布

阅读量707

点赞数

分类专栏：轮播文章标签：轮播

本文链接：https://blog.csdn.net/W_Y_L_/article/details/83625319

版权

轮播专栏收录该内容

1 篇文章 0 订阅

订阅专栏

尾部会有效果图呈现

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{
margin:0;
   padding:0;
}
#wrap{
width:100%;
   height:500px;
   background:#993333;
   position:relative;
}
#wrap .banner{
width:100%;
   height:100%;
   position:absolute;
   top:0;
   left:0;
   opacity:0;
   transition:1s;
}
#wrap .first{
background: rgb(223,175,109);
}
#wrap .two{
background:rgb(232, 232, 232);
}
#wrap .three{
background:rgb(133, 198, 236);
}
#wrap .four{
background:rgb(232, 232, 232);
}
#wrap .five{
background:rgb(1, 10, 25);
}
#wrap .six{
background:rgb(80, 113, 233);
}
#wrap .banner .banner-t{
width:1130px;
margin: 0 auto;

}
#wrap .tab{
width:100%;
position:absolute;
   bottom:10px;
text-align:center;
}
#wrap .tab span{
display:inline-block;
height:20px;
   width:20px;
   background: rgba(105,105,105,0.5);
   border-radius:50%;
}
#wrap .tab span.on{
background:#fff;
}
</style>
</head>
<body>

<div id="wrap">
<div class="banner first">
       <div class="banner-t">
           <img src="images/1.webp" alt="" width="1130"height="500"/>
       </div>
</div>
<div class="banner two">
       <div class="banner-t">
           <img src="images/2.jpg" alt="" width="1130"height="500"/>
       </div>
</div>
<div class="banner three">
       <div class="banner-t">
           <img src="images/3.jpg" alt="" width="1130"height="500"/>
       </div>
   </div>
   <div class="banner four">
           <div class="banner-t">
               <img src="images/4.jpg" alt="" width="1130"height="500"/>
           </div>
   </div>
   <div class="banner five">
           <div class="banner-t">
               <img src="images/5.webp" alt="" width="1130"height="500"/>
           </div>
   </div>
   <div class="banner six">
       <div class="banner-t">
           <img src="images/6.webp" alt="" width="1130"height="500"/>
       </div>
</div>
<div class="tab">
   <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
   </div>
</div>

<script type="text/javascript">
var aBanner = document.getElementsByClassName("banner");
   var banner_t = document.getElementsByClassName("banner-t");
   var aSpan = document.getElementsByClassName("tab")[0].getElementsByTagName("span");

   aBanner[0].style.opacity = "1";
   aSpan[0].className = "on";
   //样式初始化
var num = 0;
   var timer;
   for(var i=0;i<aSpan.length;i++){
aSpan[i].index = i;//自定义函数
       //清除
   aSpan[i].οnclick= function(){
           for(var j=0;j<aSpan.length;j++){
           num= this.index;
           aSpan[j].className = "";
           aBanner[j].style.opacity = "0";
           }
           //清除
       aSpan[num].className = "on";
       aBanner[num].style.opacity = "1";
       }
   }
timer = setInterval(function(){

       num ++;
       num %= aBanner.length;
   for(var j=0;j<aSpan.length;j++){
           aSpan[j].className = "";
           aBanner[j].style.opacity = "0";
           }

       aSpan[num].className = "on";
       aBanner[num].style.opacity = "1";

   },3000);
</script>
</body>
</html>