javascript - 图片加载不出来
本文介绍了javascript - 图片加载不出来的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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>div{
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)>div{
background-position: -140px 0;
}
ul li:nth-child(3)>div{
background-position: -280px 0;
}
ul li:nth-child(4)>div{
background-position: -420px 0;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
</ul>
<a href="javascropt:;" class="left"><</a>
<a href="javascropt:;" class="right">></a>
</div>
<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>
解决方案
如果路径对的话, 你看是不是路径里的 \ 的问题, 改成/试试 ?
这篇关于javascript - 图片加载不出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
