轮播图效果

最新推荐文章于 2022-05-18 19:23:12 发布

吾等汝多时

最新推荐文章于 2022-05-18 19:23:12 发布

阅读量155

点赞数 2

分类专栏： javaScript 文章标签： javascript html5 css3 html

原文链接：https://www.bilibili.com/video/BV18t4y1X7vX/?spm_id_from=333.788.videocard.17

版权

javaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

#爆炸的轮播图

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		*{margin:0;padding:0;}
		body{overflow:hidden;background-color:#000;}
		#box{width:640px;height:400px;border:1px solid;position:absolute;top:calc((100vh - 400px) / 2);left:calc((100vw - 640px) / 2);}
		#box>div{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;}
		#box>div>div{position:absolute;transform-style:preserve-3d;}
	</style>
</head>
<body>
<div id="box"></div>
<script src="js/index.js"></script>
</body>
</html>

js

//图片
var imgs=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
//z-index值
var z=999999;
//显示第几张图片
var index = 0;
var box = document.querySelector('#box');

boom(10,10);
//l传进来几行，t传进来几列
function boom(l,t){
	//创建一个新的div
	var oParentNode = document.createElement("div");
	//设置z-index值
	oParentNode.style.zIndex=z;
	z--;
	box.appendChild(oParentNode);
	
	var x=l,y=t;
	for(var i=0;i<y;i++){
		for(var j=0;j<x;j++){
			//创建碎片
			var oDiv = document.createElement("div");
			//添加背景图片
			oDiv.style.background = "url("+imgs[index]+")";
			oDiv.style.backgroundSize = "640px";
			oDiv.style.width = box.clientWidth / x + 'px';
			oDiv.style.height = box.clientHeight / y +'px';
			oDiv.style.left = (box.clientWidth / x) * j +'px';
			oDiv.style.top = (box.clientHeight / y) * i +'px';
			oDiv.style.backgroundPositionX = (box.clientWidth / x) * -j +'px';
			oDiv.style.backgroundPositionY = (box.clientHeight / y) * -i +'px';
			oDiv.style.transition = (Math.random()*1+0.5)+'s';
			oParentNode.appendChild(oDiv);
		}
	}
	var allDiv =oParentNode.children;
	setTimeout(()=>{
		index++;
		index == imgs.length && (index = 0);
		boom(l,t);
		for(var i=0;i<allDiv.length;i++){
			allDiv[i].style.transform = 'perspective(800px) rotateX('+(Math.random()*500-250)+'deg) rotateY('+(Math.random()*500-250)+'deg) translateX('+(Math.random()*500-250)+'px) translateY('+(Math.random()*500-250)+'px) translateZ('+(Math.random()*1000-500)+'px)';
			allDiv[i].style.opacity = 0;
		}
	},2000)
	setTimeout(()=>{
		oParentNode.remove();
	},3500)
}

吾等汝多时

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图效果

#爆炸的轮播图html<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style> *{margin:0;padding:0;} body{overflow:hidden;background-color:#000;} #box{width:640px;height:400px;border:1px soli
复制链接

扫一扫