轮播图的实现原理
顾名思义，轮播图就是实现图片的轮换播放效果。先显示一张图片，一定的时间，让这张图片消失，下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。
首先是前端html代码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.top{
width:700px;
margin: 0 auto;
height: 500px;
border: 1px solid;
background-repeat:no-repeat;
}
img{
width: 700px;
height: 500px;
}
.inner1,.inner2,.inner3,.inner4{
position: absolute;
margin-top: 0;
display:block;
}
.ul{
width: 150px;
height: 15px;
font-size: 10px;
line-height:15px;
text-align: center;
margin: 0 auto;
}
.first{
display: inline-block;
width:15px ;
height:15px;
border: 1px solid;
background-color:lightblue;
border-radius: 50%;
margin-right: 15px;
}
.first:hover{
background-color:red;
}
</style>
</head>
<body>
<div class="top">
<div class="inner1">
<img src="img/1.jpg">
</div>
<div class="inner2">
<img src="img/2.jpg">
</div>
<div class="inner3">
<img src="img/3.jpg">
</div>
<div class="inner4">
<img src="img/4.jpg">
</div>
</div>
<div class="ul">
<ul>
<li class="first one">1</li>
<li class="first two">2</li>
<li class="first three">3</li>
<li class="first four">4</li>
</ul>
</div>
</body>
</html>图片可以设置成自己想要的图片，只需要在img src后换成自己本地的图片就行。
js代码
使用display实现轮播
代码语言：javascript复制<script type="text/javascript">
//获取img
var img = document.querySelectorAll("img");//通过选择器，获取img
var li = document.querySelectorAll("li");
var div = document.querySelectorAll('.top div');
// console.log(img);
var index = 0;//定义一个初始值为0的变量
function scrol() {
> //使用display实现
> //隐藏
> for(var i=0;i<img.length;i ){
> //设置让三个隐藏，一个显示
> img[i].style.display = "none";//把所有的img隐藏
> li[i].style.backgroundColor =""; //分页颜色全都不显示
> }
> img[index].style.display = "block";//让一个显示
> li[index].style.backgroundColor = "red";//一个分页显示颜色
> index ;//自增
> if(index==div.length){
> index=0;
> }
}
var timer = setInterval(scrol,500);//设置定时器
function mOver(index){//设置鼠标移动在分页上的函数
clearInterval(timer);//清除定时器
for(var i=0;i<div.length;i ){//循环实现分页颜色的变化
div[i].style.zIndex ="1";//让所有图片隐藏
li[i].style.backgroundColor =""; //分页颜色失效
}
div[index].style.zIndex = "9";//当前选中分页显示
}
function mOut(){//鼠标移出让它继续轮播
timer = setInterval(scrol,500);
}
for(var i =0;i<div.length;i ){
li[i].onmouseover = function(){
mOver(i);
}
li[i].onmouseout = function(){
mOut(i);
}
}
</script>使用zIndex实现轮播
zIndex我的理解就是屏幕离人的距离，就是z轴。值越大，离人的距离越近，也就是首先显示出来
代码语言：javascript复制//使用zIndex实现
> for(var i=0;i<div.length;i ){
> div[i].style.zIndex ="1";
> li[i].style.backgroundColor ="";
> }
> div[index].style.zIndex = "9";
> li[index].style.backgroundColor = "red";
> index ;
> if(index==div.length){
> index=0;
> }使用透明度实现轮播
透明度是0-1之间，0是透明，1是不透明，也就是显示出来
代码语言：javascript复制 //使用透明度实现
> for(var i=0;i<img.length;i ){
> img[i].style.opacity="0";
> li[i].style.backgroundColor ="";
> }
> img[index].style.opacity = "1";
> li[index].style.backgroundColor = "red";
> index ;
> if(index==img.length){
> index=0;
> }总结
轮播图，刚才是我做的时候首先想到的是使用for循环实现轮播图，做的过程中发现，for循环实在是太快，肉眼根本捕捉不到。就想到使用定时器，每隔多长时间调用这个函数，就能实现轮播的效果。我的总体思路就是先让其他隐藏，让一个显示，然后定时器每调用一个就能实现一个的显示其他的隐藏。
