HTML学习之轮播图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这可以说是一种非常简单的实现轮播图的方法了，由于时间仓促所以没写自动轮播部分。简单说一下原理吧，就是把所有图片堆叠在一个盒子里，设置所有图片的透明度为0，这样就把所有图片都隐藏了，第一张图片除外（第一张透明度设为1），当要切换到某张图片时，在把该图片的透明度设为1，而其他的图片透明度设为0，这样就实现了简单的轮播啦。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>淡入淡出轮播图</title>

<style type="text/css">
/*清除边距*/
div,ul,li{
margin: 0;
padding: 0;
} /*首先准备一个放图片的容器*/
.container{
width: 500px;
height: 280px;
position: relative;
top: 100px;
left: 30%;
/*border: 1px solid #ccc;*/
} /*图片样式*/
.container img{
position: absolute; /*把所有图片放在同一个位置*/
width: 100%;
transition-duration: 1s; /*设置过渡时间*/
opacity: 0; /*把所有图片变透明*/
}
/*图片显示开关*/
.container img.on{
opacity: 1; /*用于显示图片*/
} /*左右按钮按钮用图片更好点,这里为了简便就用大于小于号*/
.left, .right{
position: absolute;
top: 30%;
width: 60px;
height: 100px;
line-height: 100px;
background-color: #666;
opacity: 0.5;
text-align: center;
font-size: 60px;
color: #ccc;
display: none; /*先隐藏按钮*/
cursor: pointer; /*设置鼠标悬停时的样式*/
}
.left{
left: 0;
}
.right{
right: 0;
}
.container:hover .left, .container:hover .right{
display: block; /*鼠标悬停才容器范围内时显示按钮*/
}
.left:hover, .right:hover{
color: #fff;
} /*焦点*/
.container ul{
position: absolute;
bottom: 0;
max-width: 500px;
padding: 5px 200px;
}
.container ul li{
list-style: none;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 10px;
background-color: #ccc;
cursor: pointer;
}
.container ul li.active{
background-color: #fff; /*焦点激活时的样式*/
} </style>
</head>
<body>
<div class="container">


<img class="on" src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" /> 
<div class="left"><</div>
<div class="right">></div> 
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> 
<script type="text/javascript">
//1、找到container下的所有img标签,li标签,左右按钮
var aImgs = document.querySelectorAll('.container img');
var aLis = document.querySelectorAll('.container li');
var btnLeft = document.querySelector('.container .left');
var btnRight = document.querySelector('.container .right'); // //检验是否找到
// console.log(aImgs);
// console.log(aLis);
// console.log(btnLeft);
// console.log(btnRight); //点击事件
//点击按钮图片切换
var index = 0; //当前图片下标
var lastIndex = 0;
btnRight.onclick = function(){
//记录上一张图片的下标
lastIndex = index;
//清除上一张图片的样式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = ''; index++;
index %= aImgs.length; //实现周期性变化
//设置当前图片的样式
aImgs[index].className = 'on';
aLis[index].className = 'active';
}
//左边按钮类似
btnLeft.onclick = function(){
//记录上一张图片的下标
lastIndex = index;
//清除上一张图片的样式
aImgs[lastIndex].className = '';
aLis[lastIndex].className = ''; index--;
if (index < 0) {
index = aImgs.length - 1;
}
//设置当前图片的样式
aImgs[index].className = 'on';
aLis[index].className = 'active';
}
</script>
</body>
</html>