轮播图（2018-08-09）
2018-08-09 本文已影响18人
小本YuDL
轮播图在生活中很常见，比如网页的广告宣传什么的。轮播图的写法也有很多种，有手动点击轮播的，还有自动轮播的，当然也有两者结合的。那今天就介绍一下简单的点击轮播图，和自动轮播图吧。
使用的方法：
- 注册点击事件
- 利用图片的透明度 实现切换
- 计时器的使用
1.自动轮播
首先要给图片定位，使其重叠，就可以通过透明度的改变使其轮播。
外层的ul设置相对定位relative。内层的li设置绝对定位absolute，就可使图片重叠，其中还设置了transition,让其产生渐变的效果。然后通过设置计时器，改变图片的透明度，就可实现自动轮播了。
那来看下代码吧
<style>
*{
margin: 0;
padding: 0;
}
#container{
position: absolute;
top:25%;
left:35%;
width: 600px;
height: 400px;
border: 1px solid #949595;
box-shadow: 0 0 8px #cccccc;
}
ul{
position:relative;
list-style-type: none;
}
li{
position: absolute;
padding: 20px;
overflow: hidden;
opacity: 1;
transition: 1s;
}
img{
width: 560px;
height: 350px;
box-shadow: 0 0 8px #cccccc;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><img src="image/99.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
<li><img src="image/1.jpg"></li>
<li><img src="image/38.jpg"></li>
<li><img src="image/7.jpg"></li>
<li><img src="image/8.jpg"></li>
<li><img src="image/53%20(2).jpg"></li>
<li><img src="image/10.jpg"></li>
<li><img src="image/18.jpg"></li>
<li><img src="image/11.jpg"></li>
<li><img src="image/98.jpg"></li>
<li><img src="image/47.jpg"></li>
<li><img src="image/14.jpg"></li>
</ul>
</div>
<script>
var i=0;
var lis = document.getElementsByTagName("li");
function settime() {
i++;
if(i == lis.length){ //实现图片循环播放
i = 0;
}
for(var j=0;j<lis.length;j++){
lis[j].style.opacity = 0;
}
lis[i].style.opacity = 1;
}
var time = setInterval("settime()",1000); //每隔一秒换一张图片
</script>
看下效果图：
图不能看出动态，但是可以看其样式
图片在改变
2.点击轮播
与自动轮播的区别，就是设置按钮注册点击事件。前进和后退，主要是通过
index来计算点击的次数，然后将其他的图片通过循环都隐藏，将点击的图片lis[index]显示。这个方法很简单，也很容易理解，但是也存在问题。
比如：每点击一次都要循环隐藏所有图片，效率太低，还需要改进。
来看下代码：
（在自动轮播的基础上，加上左右点击的按钮样式）
<style>
.btn{
width: 50px;
height: 80px;
top:180px;
position: absolute;
text-align: center;
line-height: 60px;
background-color: transparent;
}
.btn:hover{
background-color: rgba(0,0,0,0.2);
}
.mycss{
font-size: 30px;
color: #949595;
line-height: 80px;
}
#next{
right: 15px;
}
</style>
<body>
<div id="prev" class="btn" onclick="prev()">
<i class="iconfont icon-houtui1 mycss"></i>
</div>
<div id="next" class="btn" onclick="next()">
<i class="iconfont icon-qianjin1 mycss"></i>
</div>
<script>
var index= 0；
function next() {
index++;
if(index == lis.length){
index = 0; //这样点击到最后一张，又可以回到第一张
}
for(var i =0;i<lis.length;i++){ //将所有的图片都隐藏
lis[i].style.opacity = 0;
}
lis[index].style.opacity = 1; //将点击的相应次数的图片显示
}
function prev() {
index--;
if(index == -1){
index = lis.length -1; //后退到第一张，又回到最后一张
}
for(var i=0;i<lis.length;i++){
lis[i].style.opacity = 0;
}
lis[index].style.opacity = 1;
}
</script>
<body>
看下效果图：
左右两边都有箭头的样式，点击可以切换图片
鼠标放在箭头上，会产生灰色背景，表示选中点击
当然也可以两者结合，既可以自动，也可以再手动。轮播图的切换，有很多的方法，我只是选择了一种简单好理解的方法去做。暑假学习已经过了大半，还有很多需要学习，自己进步也是有的吧，但是最近有点懒，需要反思一下了，有点懈怠。要学习的东西还有太多，加油！
