原生JS写一个淡入淡出轮播图
【原生JS写一个淡入淡出轮播图】任何网站主页都离不开一个轮播图，这是滚动播放新闻或者广告或者内容的招牌，类型有很多，我们可以做一个淡入淡出的轮播图。
首先分析，淡入淡出指的是没有滑动效果，一张图片消失的时候另一张图片接着显示出来，仔细分析可以知道在一个轮播框内其实利用绝对定位放了好几张图片，
利用他们的透明度的改变依次出现和消失。
效果图如下：
文章图片
文章图片
布局如下：
文章图片
文章图片
文章图片
文章图片
<
>CSS样式：
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}#banner{
width: 800px;
height: 400px;
margin:50px auto;
position: relative;
}ul li img{
width: 800px;
height: 400px;
display: block;
}
ul li{
position: absolute;
opacity: 0;
}ul li:first-child{
opacity: 1;
}#direction>a{
position: absolute;
width: 50px;
height: 30px;
display: inline-block;
background: #000;
color: white;
text-align: center;
line-height: 30px;
font-size: 20px;
top:185px ;
}
#direction>a:last-child{
right: 0;
}#btn{
position: absolute;
top: 370px;
left: 45%;
}
#btn>a{
display: inline-block;
width: 20px;
height: 20px;
border-radius:50%;
margin-left: 10px;
background: #ccc;
}
#btn>.active{
background: red;
}
JS代码及注释：
//inow为当前图片，next为下一张要显示的图片
var inow=0;
var next=0;
var timer=null;
//获取所有的li标签以
var aLi=document.getElementsByTagName("li");
//获取所有的选项卡的标签
var abtn=document.querySelectorAll("#btn>a");
//获取方向按钮的标签
var aD=document.querySelectorAll("#direction>a");
//获取轮播框元素
var banner=document.getElementById("banner");
//封装图片切换函数并匹配选项卡
function toImg(){
move(aLi[inow],{opacity:0});
move(aLi[next],{opacity:100});
inow=next;
//遍历每一个选项卡让所有的样式清空
for(var i=0;
i转载于:https://www.cnblogs.com/MikePan/p/9152102.html
推荐阅读
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 今天写一些什么
- 迷失的世界（二十七）
- live|live to inspire 一个普通上班族的流水账0723