<body>? <div class="slider">? <!--0.修改 VIEW -> Template(關鍵字替換)，增加template id-->? ? ?<div class="main" id="template_main">? ? ? ?<div class="main-i main-i_active" id="main_{{index}}">? ? ? ? ?? ? ? ? ?<div class="caption">? ? ? ? ? ?<h2>{{h2}}</h2>? ? ? ? ? ?<h3>{{h3}}</h3>? ? ? ? ?</div>? ? ? ? ?<img src="images/{{index}}.jpg" class="picture">? ? ? ?</div><!--/*/*main-i的結束**/-->? ? ?</div><!--/*main的結束*/-->? ? ?<div class="ctrl" id="template_ctrl">? ? ? ? <a class="ctrl-i" href="javascript:switchSlider({{index}});" id="ctrl_{{index}}"><img src="images/{{index}}.jpg"></a>? ? ? ? <!--控制槽里面有預覽圖所以插入相同的圖片-->? ? ?</div><!--/*控制按鈕的結束*/-->? </div></body>------------------------------------------------------這段是我的html代碼----------------------------------------------------------------------------------------------下面這段是js 代碼----------------------------------------//1.數(shù)據(jù)定義（實際環(huán)境應有后臺給出）var data = [ {img:1,h1:'lllllla',h2:'1113212'}, {img:2,h1:'lllllls',h2:'111321212'}, {img:3,h1:'lllllld',h2:'111212'}, {img:4,h1:'llllllf',h2:'1113212'}, {img:5,h1:'llllllx',h2:'11131212'}, {img:6,h1:'lllllls',h2:'11112'}, {img:7,h1:'lllllla',h2:'1113212'}];//2.定義通用函數(shù)var g = function (id){ if(id.substr(0,1) == '.'){ ? ?return document.getElementsByClassName(id.substr(1)); }? ? return document.getElementById(id); }//3.添加幻燈片操作（所有幻燈片和按鈕）function addSliders(){ //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ù)，構建最終輸出的HTML for(var i = 0;i < data.length;i++) { var _html_main = tpl_main.replace(/{{index}}/g,data[i].img).replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2);? ? ? ? //替換臨時變量，g表示全局替換 var _html_ctrl = tpl_ctrl.replace(/{{index}}/g,data[i].img); ? ? out_main.push(_html_main); out_ctrl.push(_html_ctrl); } //3.4 把HTML回寫到對應的DOM 里面 g('template_main').innerHTML = out_main.join('');//所有幻燈片 g('template_ctrl').innerHTML = out_ctrl.join('');//所有控制按鈕 //7. 增加#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(var i=0;i<clear_ctrl.length;i++) { clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active',''); clear_main[i].className = clear_main[i].className.replace(' main-i_active','') } //5.4 為當前控制按鈕和幻燈片附加樣式 main.className += ' main-i_active'; ctrl.className += ' ctrl-i_active';}? ?? //6.動態(tài)調整圖片的 margin-top 使其垂直居中 function movePicture() { var pictures = g('.picture'); for(var i =0;i<pictures.length;i++) { pictures[i].style.marginTop = (-1* pictures[i].clientHeight/2) + 'px' } }//4.定義何時出理 當窗口打開的時候再添加燈片window.onload = function(){ addSliders(); switchSlider(1); setTimeout(function(){movePicture();},100);}老師哪里說的是切換圖片的時候會顯示白色背景，而章節(jié)目的是在切換的時候會顯示上一張幻燈片的圖片，要創(chuàng)建一個新的div但是div 里面的格式是如何我不知道怎么寫了
最近在學網(wǎng)頁的幻燈片特效但是在優(yōu)化中遇到了一些問題求幫助?。?/h1>
Stitch晨
2016-06-01 07:54:31
Stitch晨
2016-06-01 07:54:31
