求虎友们改这个代码,,让背景图只显示一张不重复

@Ta 11-14 18:39 243点击
<!--不管什么方法背景图老是重复,求解?😭😭😭
以下是代码,求改成背景图只不重复-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js图片爆炸效果</title>
<link rel="stylesheet" >
<style>
body {
overflow: hidden;
background-color: #fff;
}
*{
margin: 0;
padding: 0;
}
#box {
width: 100%;
height:100%;
position:absolute;
left:0;
top:0;
}
#box>div {
position:absolute;
left: 0;
top:0;
width:100%;
height:100%;
transform-style:preserve-3d;
}
#box>div>div {
position:absolute;
transform:preserve-3d;

}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 图片
var imgs = ["https://www.17sucai.com/preview/506871/2017-12-11/%E7%88%86%E7%82%B8/img/1.jpg","https://www.17sucai.com/preview/506871/2017-12-11/%E7%88%86%E7%82%B8/img/2.jpg","https://www.17sucai.com/preview/506871/2017-12-11/%E7%88%86%E7%82%B8/img/3.jpg","https://www.17sucai.com/preview/506871/2017-12-11/%E7%88%86%E7%82%B8/img/4.jpg"];
//z-index的值
var z = 999999;
//显示第几张图片
var index = 0;
var box = document.getElementById('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.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.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.style.opacity = 0;
};
},2000);

setTimeout(function(){
oParentNode.remove();
},3500)

}
</script>
</body>
</html>
回复列表(3)
  • 2
    @Ta / 11-14 23:04
    你就这四张图来循环,你说它重复不重复展示......

    建议直接调用api之类的随机切换图库
  • 3
    @Ta / 11-15 00:23

    尝试把"url("+imgs[index]+")";改成"url("+imgs[Math.floor(Math.random() * 4)]+")";
    问题描述不清楚,读不通

添加新回复
回复需要登录

[聊天-公共聊天室] 无期徒刑:<?php class 狗 { public $名字; …