<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.container{
width: 560px;
height: 380px;
margin: 50px auto 0;
border: 1px solid gray;
position: relative;
}
.container a{
position:absolute;
top: 50%;
width:30px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
text-decoration: none;
background: gray;
color: #000;
}
.container a.left{
left: -30px;
}
.container a.right{
right: -30px;
}
ul{
width: 100%;
height: 100%;
display: flex;
}
ul li{
flex: 1;
transform-style: preserve-3d;
position: relative;
transition: all 1s;
}
ul li:nth-child(2){
transition: all 1s 0.1s;
}
ul li:nth-child(3){
transition: all 1s 0.2s;
}
ul li:nth-child(4){
transition: all 1s 0.3s;
}
ul li>p{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.first{
background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
transform: rotateX(0deg) translateZ(190deg);
}
.scent{
background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
transform: rotateX(-90deg) translateZ(190deg);
}
.three{
background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
transform: rotateX(-180deg) translateZ(190deg);
}
.four{
background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
transform: rotateX(90deg) translateZ(190deg);
}
ul li:nth-child(2)>p{
background-position: -140px 0;
}
ul li:nth-child(3)>p{
background-position: -280px 0;
}
ul li:nth-child(4)>p{
background-position: -420px 0;
}
</style>
</head>
<body>
<p class="container">
<ul>
<li>
<p class="first"></p>
<p class="scent"></p>
<p class="three"></p>
<p class="four"></p>
</li>
<li>
<p class="first"></p>
<p class="scent"></p>
<p class="three"></p>
<p class="four"></p>
</li>
<li>
<p class="first"></p>
<p class="scent"></p>
<p class="three"></p>
<p class="four"></p>
</li>
<li>
<p class="first"></p>
<p class="scent"></p>
<p class="three"></p>
<p class="four"></p>
</li>
</ul>
<a href="javascropt:;" class="left"><</a>
<a href="javascropt:;" class="right">></a>
</p>
<script type="text/javascript">
(function(window){
var btn = document.querySelectorAll("a");
var lis = document.querySelectorAll("li");
var num = 0;
var flog = true;
// 左右按钮点击
btn[1].onclick = function(){
lunbo(1);
};
btn[0].onclick = function(){
lunbo(0);
};
lis[lis.length - 1 ].addEventListener("transitionend", function(){
flog = true;
}, false);
// 自动播放
var timer = null;
timer = setInterval(function(){
lunbo(1);
}, 3000);
var demo = document.querySelector(".container");
demo.onmouseover = function(){
clearInterval(timer);
};
demo.onmouseout = function(){
timer = setInterval(function(){
lunbo(1);
}, 3000);
};
function lunbo(index){
if(flog){
flog = false;
if(index){
num++;
}else{
num--;
};
for( i = 0 ; i < lis.length ; i++ ){
lis[i].style.transform = "rotateX("+num*90+"deg)";
};
};
}
})(window)
</script>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika laluannya betul, adakah anda rasa ia bermasalah dengan laluan tersebut?
Kalau keluar, sepatutnya sebab alamat gambar yang ditulis dalam css tu salah Cuba ambil gambar header protokol http dari Baidu Pictures dan akan keluar
Selain itu, kesannya kelihatan baik, putaran 3D
background: url(D:mylifefront end_projectscssimg2.jpg) no-repeat;
Semua kod ini disebabkan oleh masalah laluan url dalam css hendaklah ditulis sebagai laluan relatif bagi fail css Laluan tidak ditemui.
latar belakang: url(img/2.jpg) tidak berulang;