轮播图的实现原理顾名思义，轮播图就是实现图片的轮换播放效果。先显示一张图片，一定的时间，让这张图片消失，下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。

首先是前端html代码代码语言：javascript复制

图片可以设置成自己想要的图片，只需要在img src后换成自己本地的图片就行。

js代码使用display实现轮播代码语言：javascript复制使用zIndex实现轮播zIndex我的理解就是屏幕离人的距离，就是z轴。值越大，离人的距离越近，也就是首先显示出来

代码语言：javascript复制//使用zIndex实现

> for(var i=0;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[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循环实在是太快，肉眼根本捕捉不到。就想到使用定时器，每隔多长时间调用这个函数，就能实现轮播的效果。我的总体思路就是先让其他隐藏，让一个显示，然后定时器每调用一个就能实现一个的显示其他的隐藏。