大圖無(wú)法顯示，下面是代碼（除了css樣式代碼沒傳）
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>幻燈片</title>
? ?<style>
? ? ? ?* {
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? ?}
? ? ? ?body {
? ? ? ? ? ?padding: 50px 0;
? ? ? ? ? ?background-color: #FFF;
? ? ? ? ? ?font-size: 14px;
? ? ? ? ? ?font-family: 'Avenir Next'; /*字體類型*/
color: #555;
? ? ? ? ? ?-webkit-font-smoothing: antialiased; /* 字體抗鋸齒 */
}
? ?</style>
? ?<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
? ?<div class="slider">
? ? ? ?<!--模板修改 第0步，修改 VIEW -> Template(關(guān)鍵字替換)，添加 template id-->
<div id="template_main" class="main">
? ? ? ? ? ?<div id="main_{{index}}" class="main-i css">
? ? ? ? ? ? ? ?<div class="caption">
? ? ? ? ? ? ? ? ? ?<h2>h2</h2>
? ? ? ? ? ? ? ? ? ?<h3>h3</h3>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<img class="picture" src="image/index.jpg" />
? ? ? ? ? ?</div>
? ? ? ?</div>
? ? ? ?<div id="template_ctrl" class="ctrl">
? ? ? ? ? ?<a class="ctrl-i" id="ctrl_index" href="javascript:switchSlider(index);"><img src="image/index.jpg" /></a>
? ? ? ?</div>
? ?</div>
? ?<script src="box.js"></script>
</body>
</html>
下面是鏈接的 js 代碼
/**
* Created by mac on 2016/11/24.
*/
? ?/****** ?1. 數(shù)據(jù)定義，（ 實(shí)際生產(chǎn)環(huán)境中，應(yīng)由后臺(tái)給出 ）********/
var data = [
? ?{img:1,h1:'Creative',h2:'DUET'},
? ?{img:2,h1:'Friendly',h2:'DEVIL'},
? ?{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
? ?{img:4,h1:'Insecure',h2:'HUSSLER'},
? ?{img:5,h1:'Loving',h2:'REBEL '},
? ?{img:6,h1:'Passionate',h2:'SEEKER'},
? ?{img:7,h1:'Crazy',h2:'FRIEND'}
];
/********* ? 2. 通用函數(shù) ? ?*************/
var g = function (id) {
? ?if (id.substr == '.'){
? ? ? ?return document.getElementsByClassName(id.substr(1));
? ?}
? ?return document.getElementById(id);
}
/********* ? 3. 添加幻燈片的操作 （所有幻燈片 & 對(duì)應(yīng)的按鈕 ） ? ?*************/
function addSliers() {
? ?// 3.1 ?獲取模板
? ?var tpl_main = g('template_main').innerHTML
? ? ? ? ? ? ? ? ? ?.replace(/^\s*/,'')
? ? ? ? ? ? ? ? ? ?.replace(/^\s*$/,'');//清楚空格
? ?var tpl_ctrl = g('template_ctrl').innerHTML
? ? ? ? ? ? ? ? ? ?.replace(/^\s*/,'')
? ? ? ? ? ? ? ? ? ?.replace(/^\s*$/,'');
? ?// 3.2 定義最終輸出的 HTML 的變量
? ?var out_main = [];
? ?var out_ctrl = [];
? ?// 3.3 遍歷所有數(shù)據(jù)，構(gòu)建最終輸出的 HTML
? ?for ( i in data){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//正則表達(dá)式，g表示全局替換，把index替換成img
? ? ? ?var _html_main = tpl_main.replace(/index/g,data[i].img)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.replace(/h2/g,data[i].h1)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.replace(/h3/g,data[i].h2)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.replace(/css/g,['','main-i_right'][i%2]);
? ? ? ?var _html_ctrl = tpl_ctrl.replace(/index/g,data[i].img);
? ? ? ?out_main.push(_html_main);
? ? ? ?out_ctrl.push(_html_ctrl);
? ?}
? ?// 3.4 吧 HTML 回寫到對(duì)應(yīng)的 DOM 里
? ?g('template_main').innerHTML = out_main.join('');
? ?g('template_ctrl').innerHTML = out_ctrl.join('');
? ?// 7.1 ?增加 #main-background
? ?g('template_main').innerHTML += tpl_main.replace(/index/g,'{{index}}')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.replace(/h2/g,data[i].h1)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.replace(/h3/g,data[i].h2);
? ?g('main_index').id = 'main_background';
}
? ?// 5. 幻燈片切換
function switchSlider(n) {
? ?// 5.1 獲得要展現(xiàn)的幻燈片控制按鈕 DOM
? ?var main = g('main_' + n);
? ?var ctrl = g('ctrl_' + n);
? ?// 5.2 獲得所有的幻燈片以及控制按鈕
? ?var clear_main = g('.main - i');
? ?var clear_ctrl = g('.ctrl - i');
? ?// 5.3 ?清楚 active 樣式
? ?for (i = 0;i<clear_ctrl.length;i ++){
? ? ? ?clear_main[i].className = clear_main[i].className.replace('main-i_active','');
? ? ? ?clear_ctrl[i].className = clear_ctrl[i].className.replace('ctrl-i_active','');
? ?}
? ?// 5.4 為當(dāng)前 按鈕和幻燈片 添加附加樣式
? ?main.className += 'main-i_active';
? ?ctrl.className += 'ctrl-i_active';
? ?// 7.2 ?切換時(shí)，復(fù)制上一張幻燈片到 main_background 中
? ?setTimeout(function () {
? ? ? ?g('main_background').innerHTML = main.innerHTML;
? ?},1000);
}
/********* ? 6. 動(dòng)態(tài)調(diào)整圖片的 ?margin-top 使之垂直居中 ? ?*************/
function movePictures() {
? ?var pictures = g('.picture');
? ?for (i = 0;i < pictures.length;i ++){
? ? ? ?pictures[i].style.marginTop = (-1 * pictures[i].clientHeight / 2) + 'px';
? ?}
}
/********* ? 4.定義幻燈片何時(shí)輸出 ? ?*************/
window.onload = function () {
? ?addSliers();
? ?switchSlider(2);
? ?setTimeout(function () {
? ? ? ?movePictures();
? ?},1000);
};
2018-11-25
樓上正解
2016-11-26
再有就是老師在最開始寫html代碼插入模板圖片的時(shí)候，把第一張圖片1.jpg復(fù)制了一個(gè)，并且把復(fù)制的圖片的名字改成了{(lán){index}}.jpg然后直接傳入成了模板圖片
2016-11-26
需要用兩個(gè)花括號(hào)把<img class="picture" src="image/index.jpg" />中的 index 括起來，形成模板字符串，以便將圖片傳入。如下所示應(yīng)該寫成<img class="picture" src="image/{{index}}.jpg" />再有就是，只要是屬于模板的字符串 index 和 h2 和 h3 都要用兩個(gè)花括號(hào)括起來，無(wú)論是html里面的還是js里面的，你應(yīng)該可以在視頻中看到老師都括起來了的，而且也有大概講到{{}}的用法