<!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>
ringa_lee2017-05-19 10:38:38
If the path is correct, do you think there is a problem with in the path? Change/try it?
phpcn_u15822017-05-19 10:38:38
If it comes out, it should be because the image address written in the css is wrong. Try taking a picture of the http protocol header from Baidu Pictures and it will come out
In addition, the effect looks good, 3D rotation
習慣沉默2017-05-19 10:38:38
background: url(D:mylifefront end_projectscssimg2.jpg) no-repeat;
All these codes are path problems. The url in css should be the relative path of the css file. If you write the absolute path, it will not be found. .
所以应该改为
background: url(img/2.jpg) no-repeat;