只能實現到頁面翻轉那里，輸出海報就不可以了，報錯如下
Uncaught TypeError: document[method] is not a function
? ? at g (index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:137)
? ? at addPhotos (index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:153)
? ? at index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:166
g @ index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:137
addPhotos @ index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:153
(anonymous) @ index.html?_ijt=bg3dgb7hd8sc3c8jc5cb5gng07:166
請問我的報這個錯是怎么回事啊？求大神，謝謝。而且只能實現到頁面翻轉
2017-11-16
源碼貼出來看一下
2018-02-24
新手請教下，/photo_center/這種寫法是js特有的嗎，之前學js的時候沒接觸過，有大神講解下嗎
2017-11-21
好像是你的圖片文件夾引用的不對，導致找不到圖片。
如果是按照老師的思路來寫的話，圖片文件夾應該與index.html文件并列，所以路徑應該是img/圖片名.jpg
2017-11-20
<!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;">
<!--2.改寫視圖，為模板字符串-->
<div class="wrap" id = "wrap">
? ?<div class="photo photo_center photo_front" onclick="turn(this)"
id = "photo_{{index}}">
<!--photo-wrap負責翻轉，photo負責平移和旋轉-->
<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