纯js制作图片轮播效果

骑猪看日落 2022-06-13 09:53 304阅读 0赞

好久没有发博客了，最近都在复习，为了找工作做准备。

前段时间逛了下鼠绘漫画网追海贼王最新漫画，发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同，看起来更加有趣，于是我尝试了用js复写它。

前提提要：想要读懂这篇文章最好要懂css的定位position，简单js技术。

先看效果：

![123][]

原谅我没有做个动态gif，反正读者只要知道他是做什么的就好。（当我鼠标滑动到任意一张图片，其他图片就要滑动开，让这张图片完全显示出来。）若读者想查看具体效果：可以点击[这里][Link 1]访问。

让我们先上代码再进行讲解：

简单的html:

简单的css:

.imgs{
    	width: 1000px;
    	height: 300px;
    	margin: 100px auto;
    	border: 1px #999999 solid;
    	overflow: hidden;
    	position: relative;
    }
    
    .imgs img{
    	width: 50%;
    	height: 100%;
    	transition:left 0.3s;
    	position: absolute;
    }
    
    .imgs ul{
    	width: 100px;
    	position: absolute;
    	right: 50px;
    	bottom: 20px;
    	z-index: 100;/*将其置于顶层*/
    }
    
    .imgs ul li{
    	float: left;
    	list-style: none;
    }
    
    .imgs ul li button{
    	height: 13px;
    	margin-left: 3px;
    	border-radius: 50%;
    	border: none;
    }
    
    #zuo,#you{
    	width: 30px;
    	height: 50px;
    	position: absolute;
    	top: 125px;
    	z-index: 100;/*将其置于顶层*/
    	border: none;
    	filter:alpha(Opacity=80);
    	-moz-opacity:0.5;
    	opacity: 0.5;
    	background-color: #B2B2B2;
    }
    
    #zuo{
    	left: 5px;
    }
    
    #you{
    	right: 5px;
    }
    
    #zuo input,#you input{
    	width: 20px;
    	height: 20px;
    	position: relative;
    	top: 15px;
    	left: 5px;
    	border: none;
    	background-size: contain;/*使图片充满*/
    	filter:alpha(Opacity=80);
    	-moz-opacity:0.5;
    	opacity: 0.5;
    	background-color: #B2B2B2;
    }
    
    #zuo input{
    	background-image: url(../img/zuo.png);
    }
    
    #you input{
    	background-image: url(../img/you.png);
    }

js实现效果：

for(var i=0;i<document.getElementsByTagName("img").length;i++){
    	document.getElementsByTagName("img")[i].style.zIndex = i;
    	document.getElementsByTagName("img")[i].style.left = i*12.5+"%";
    }//图片初始化赋予状态
    
    var t;//Time
    var state = 0;
    
    hover(0);//自动轮播开关
    
    //主方法
    function hover(onHover){
    	
    	clearTimeout(t);//清除Time,防止多次点击引起混乱
    	
    	document.getElementsByTagName("button")[onHover].style.backgroundColor = "chocolate";//这用来控制按钮颜色改变
    	
    	//对每个鼠标悬浮对象的所有其他图片进行left改变
    	for(var i=0;ionHover){
    				img.style.left = 12.5*i+37.5+"%";//这是当我们鼠标经过图片，他右边的图片应该到达右边状态
    		}else if(i<=onHover){
    				img.style.left = i*12.5+"%";//这是当我们鼠标经过图片，他左边的图片应该回到初始状态
    		}
    		
    		if(i!=onHover){
    				document.getElementsByTagName("button")[i].style.backgroundColor = "#ffffff";
    		}
    	}
    	
    	state = onHover;//保存当前状态
    	
    	//用来控制自动轮播
    	onHover++;
    	if(onHover==document.getElementsByTagName("img").length){
    		onHover=0;
    	}
    	
    	
    	t = setTimeout("hover("+onHover+")",2000);//每隔2s自动下一个
    }
    
    //点击下一个上一个
    function next_hover(right){
    	var onHover = state;
    	if(right){
    		if(state==document.getElementsByTagName("img").length-1){//进行状态判断，若为最后一个，下一个为第一个
    			onHover=0;
    		}else{
    			onHover++;
    		}
    	}else{
    		if(state==0){//进行状态判断，若为第一个，下一个为最一个
    			onHover=document.getElementsByTagName("img").length-1;
    		}else{
    			onHover--;
    		}
    	}
    	hover(onHover);
    }

若读者想看具体代码可以到我的详细代码，我已经上传到githup上： [点击打开链接][Link 2]

设计思路：

其实这个动画看着很酷炫，但是实现思路还是蛮简单的。

每一张图片都只有两种状态：1完全显示。2收起来。

图片通过css属性z-index来实现折叠状态。而鼠标悬浮事件则通过js来控制图片left的值实现动画效果。

当我滑过图片时，我需要进行遍历所有图片，当在图片右边的会向右滑动，在左边的回到左边。

//对每个鼠标悬浮对象的所有其他图片进行left改变
    	for(var i=0;i<document.getElementsByTagName("img").length;i++){
    		var img = document.getElementsByTagName("img")[i];
    		if(i>onHover){
    				img.style.left = 12.5*i+37.5+"%";//这是当我们鼠标经过图片，他右边的图片应该到达右边状态
    		}else if(i<=onHover){
    				img.style.left = i*12.5+"%";//这是当我们鼠标经过图片，他左边的图片应该回到初始状态
    		}
    		
    		if(i!=onHover){
    				document.getElementsByTagName("button")[i].style.backgroundColor = "#ffffff";
    		}
    	}

我在做完滑动轮播后再加入了自动轮播效果。具体实现通过setTimeout这个方法。这个方法有两个参数，第一个参数传具体执行，第二个传执行时间。

//用来控制自动轮播
    	onHover++;
    	if(onHover==document.getElementsByTagName("img").length){
    		onHover=0;
    	}
    	
    	
    	t = setTimeout("hover("+onHover+")",2000);//每隔2s自动下一个

别忘了hover方法开始加入clearTimeout方法，这个方法用来清除Timeout,否则当我们自动轮播与手动滑动同时运行，会同时操作轮播效果。

图片滑动效果主要运用了css的transition属性，若有兴趣，可以去w3c看看，我就不废话了。

这就是这次做的大致效果，若读者发现有任何错误或者疑问欢迎讨论。谢谢大家。

[123]: /images/20220613/a88daa1f77784993aa6406790c28eca2.png
[Link 1]: https://premonster.github.io/imagelunbo/demo_dao.html
[Link 2]: https://github.com/preMonster/imagelunbo