用三种方式实现轮播图

轮播图的实现原理

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

首先是前端html代码

	
	
	
 

	

			

			 
			
			 

			
			
			 

			
		     
			 

			
		 	
		
		

			

			
1
			
2
			
3
			
4
			
		

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

js代码

使用display实现轮播

使用zIndex实现轮播

zIndex我的理解就是屏幕离人的距离，就是z轴。值越大，离人的距离越近，也就是首先显示出来

//使用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是不透明，也就是显示出来

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