用三种方式实现轮播图

微醺

发布于 2019-01-17 13:13:19

2.6K0

发布于 2019-01-17 13:13:19

文章被收录于专栏：有脑子的搬砖工有脑子的搬砖工

轮播图的实现原理

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

首先是前端html代码

<!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实现轮播

<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轴。值越大，离人的距离越近，也就是首先显示出来

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

    //使用透明度实现
>   	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;
>     	}