为什么php图片加载不出来,javascript - 图片加载不出来

Document

*{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\1.jpg) no-repeat;

transform: rotateX(0deg) translateZ(190deg);

}

.scent{

background: url(D:\mylife\front end_projects\css\img\2.jpg) no-repeat;

transform: rotateX(-90deg) translateZ(190deg);

}

.three{

background: url(D:\mylife\front end_projects\css\img\3.jpg) no-repeat;

transform: rotateX(-180deg) translateZ(190deg);

}

.four{

background: url(D:\mylife\front end_projects\css\img\4.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;

}

<

>

(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)