只能实现到页面翻转那里，输出海报就不可以了，报错如下

个回答

Dreamer1017

2017-11-16 13:08:24

已采纳

源码贴出来看一下

0
YH214

2018-02-24 13:29:13

新手请教下，/photo_center/这种写法是js特有的吗，之前学js的时候没接触过，有大神讲解下吗

0
Dreamer1017

2017-11-21 10:22:27

<p class="image"><img src="../img/{{img}}" ></p>
好像是你的图片文件夹引用的不对，导致找不到图片。
如果是按照老师的思路来写的话，图片文件夹应该与index.html文件并列，所以路径应该是img/图片名.jpg

0
Pansychen

2017-11-20 09:36:46

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海报画廊</title>

<style type="text/css">
*{padding:0;margin: 0;}
body {
background-color: #ffffff;
font-size: 14px;
font-family: 'Avenir Next','Lantinghei SC';
color: #555555;
-webkit-font-smoothing: antialiased; /*字体抗锯齿*/
}

/*设置垂直居中方法：
position：absolute；
top：50%；
margin-top：-300px；设置为高度一半
*/
.wrap{
width:100%;
height:600px;
position: absolute;
top:50%;
margin-top: -300px;
background-color: black;
overflow: hidden;

-webkit-perspective: 800px;/*使得出现旋转的特效*/
}
/*海报样式*/
.photo{
width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0,0,0,01);
}

.photo .side {
width:100%;
height: 100%;
background-color: #eeeeee;
position: absolute;
top:0;
right:0;
padding: 20px;

box-sizing: border-box;/*内容和padding都会在边框之内呈现*/
}
.photo .side-front{}
.photo .side-front .image{
width: 100%;
height:250px;
line-height: 250px;
overflow: hidden;
}
.photo .side-front .image img {
width:100%;
}
.photo .side-front .caption{
text-align: center;
font-size: 16px;
line-height: 50px;
}

.photo .side-back{}
.photo .side-back .desc{
color: black;
font-size: 14px;
line-height: 1.5em;
}

/*当前选中的海报样式*/
.photo_center{
left:50%;
top: 50%;
margin: -160px 0 0 -130px;
z-index: 999;/*显示透明度，不会被其他的样式遮挡*/
}
/*负责翻转*/
.photo-wrap{
position: absolute;
width: 100%;
height: 100%;

-webkit-transform-style: preserve-3d;/*支持子元素的3D效果*/
-webkit-transition: all .6s;
}
.photo-wrap .side-front{
-webkit-transform: rotateY(180deg);/*定义位移以及沿着Y轴旋转*/
}
.photo-wrap. side-back{
-webkit-transform: rotateY(0deg);
}
.photo-wrap.side{
-webkit-backface-visibility: hidden;/*当元素不面向屏幕时隐藏*/
}

.photo_front .photo-wrap{
-webkit-transform: rotateY(180deg);
}
.photo_back .photo-wrap{
-webkit-transform: rotateY(0deg);
}
</style>
</head>
<body onselectstart="return false;">


<div class="wrap" id = "wrap">

<div class="photo photo_center photo_front" onclick="turn(this)"
id = "photo_{{index}}">

<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="../img/{{img}}" ></p>
<p class="caption">{{caption}}</p>
</div>
<div class="side side-back">
<p class="desc">{{desc}}</p>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">

//3.通用函数
function g(selector){
var method=selector.substr(0,1)=="."?"getElementsByClassName":"getElementById";
return document[method](selector.substr(1));
}

//随机生成一个值0~20，支持取值范围，ranom([min,max]);
// function random(range) {
// var max = Math.max(range[0],range[1]);
// var min = Math.max(range[0],range[1]);
//
// var diff = max - min;//差值，[1,6] =>5(0~5)
//
// var number = Math.ceil(Math.random() *diff +min);//取整
// return number;
// }

//4.输出所有的海报
var data = data;
function addPhotos() {
var template=g("#warp").innerHTML.replace(/^\s*/,"").replace(/\s*$/,"");
var html = [];
// var nav = [];
for(s in data){//for(var s = 0; s<data.length; s++
var _html = template
.replace('{{index}}',s)
.replace('{{img}}',data[s].img)
.replace('{{caption}}',data[s].caption)
.replace('{{desc}}',data[s].desc);
html.push(_html);
//nav.push('<span id="nav_'+s+'" onclick="turn(g(\'#photo_'+s+'\'))"> </span>');
}
//html.push('<div>'+nav.join("")+'</div>');
g('#wrap').innerHTML = html.join('');
//resort(random([0,data.length-1]));
}
addPhotos();

//5.排序海报
// function resort(n) {
// var photo_center = g('#photo_'+n);
// photo_center.className += 'photo_center';
//
// }

//1.翻面控制
function turn(elem) {
var cls = elem.className;
if(/photo_front/.test(cls)){
cls = cls.replace(/photo_front/,'photo_back')
}
else {
cls = cls.replace(/photo_back/,'photo_front')
}
return elem.className = cls;
}
</script>

</body>
</html>

根据视频到这一步应该就可以显示出来图片，但是我的没有显示只能翻转。报错变成了如下：
GET http://localhost:63342/%E6%85%95%E8%AF%BE%E7%BD%91htmlcss/img/%7B%7Bimg%7D%7D 404 (Not Found)
data.js:51 1 仙人掌.jpg
data.js:51 2 熊童子<br> <br>肉肉名称：熊熊<br>肉肉生日：2016.5.21<br>肉肉简介：原产南美草原的仙人掌科(Cactaceae)Notocactus属植物，<br>仙人球属（金琥属Echinocactus），</br>有象牙金琥（E.grusonii）、大金琥（E.ingens）等25种。<br>株形小，圆球状到椭圆柱状，常盆栽观赏。.jpg
data.js:51 3 玉露.jpg
data.js:51 4 黄丽.jpg
index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:153 Uncaught TypeError: Cannot read property 'innerHTML' of null
at addPhotos (index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:153)
at index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:169
addPhotos @ index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:153
(anonymous) @ index.html?_ijt=iqpcaamccvg7oc5uijj4saqr25:169

0