透明度变化的轮播图
一、简单介绍
轮播图是前端学习中常用的案例,通过各式各样的轮播图我们可以对JS的基础知识进行实践
下面是我在学习中所写的透明度轮播图
实际中获取更多炫酷效果的轮播图可以访问Swiper中文网
二、基本模块介绍
1.HTML部分
(1).先写一个div作为轮播图板块的主体
(2).写一个列表来存n张图
(3).写两个按钮来控制前进和后退(为了更好的样式,我用两个div添加click事件来代替)
(4).图片下方的圆点序号
html代码
<div id="slider">
<ul id="list">
<li class="item"><img src="img/1.jpg"></li>
<li class="item"><img src="img/2.jpg"></li>
<li class="item"><img src="img/3.jpg"></li>
<li class="item"><img src="img/4.jpg"></li>
<li class="item"><img src="img/5.jpg"></li>
</ul>
<div id="left" class="button"><</div>
<div id="right" class="button">></div>
<ul id="pic">
<li class="bullet focus">1</li>
<li class="bullet">2</li>
<li class="bullet">3</li>
<li class="bullet">4</li>
<li class="bullet">5</li>
</ul>
</div>
2.CSS部分
(1).主div(slider)的大小及位置(在这里要用相对位置relative)
(2).图片(item)的大小,位置(相对位置absolute,此时可将几张图片由纵向排列改为叠在一起1),透明度
(3).左右按钮(button)及下方圆点序号(bullet)的大小,透明度,位置,浮动
css代码
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#slider {
width: 700px;
height: 500px;
position: relative;
left: 700px;
top: 100px;
}
#slider .item {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
#slider .item:first-of-type{
opacity: 1;
}
.item img {
width: 700px;
height: 500px;
display: block;
}
#slider .button {
height: 70px;
width: 50px;
background-color: black;
position: absolute;
top: 220px;
color: white;
text-align: center;
line-height: 70px;
font-size: 30px;
opacity: 0.2;
cursor: pointer;
}
#slider #left {
left: 0;
}
#slider #right {
right: 0;
}
#slider #pic {
position: relative;
top: 450px;
left: 230px;
}
#slider #pic .bullet