? // 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");
?? ??? ??? ??? ??
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/* 為什么下面的for循環(huán)中不能使用for...in呢，我們知道for...in可以用來(lái)遍歷數(shù)組中的元素和
?? ??? ??? ??? ??? ?對(duì)象中的屬性，通過(guò)g()得到的函數(shù)不是嚴(yán)格意義上的數(shù)組，是對(duì)象。
?? ??? ??? ??? ??? ?alert(typeof clear_main);
?? ??? ??? ??? ??? ?alert(clear_main instanceof Array);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?使用for...in遍歷clear_main的過(guò)程中得到這些值：
?? ??? ??? ??? ??? ?0，1，2，3，4，5，6，item，namedItem，length。
?? ??? ??? ??? ??? ?我們只需要前面的數(shù)值。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?for(var i in clear_main){
?? ??? ??? ??? ??? ??? ?alert(i);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?// 5.3清除active樣式
?? ??? ??? ??? ??? ?// 這里只能使用普通for循環(huán)，不能使用for...in，
?? ??? ??? ??? ??? ?for(i = 0; i < clear_ctrl.length; i ++){
?? ??? ??? ??? ??? ??? ?// 通過(guò)字符串替換函數(shù)把a(bǔ)ctive樣式去掉即可。
?? ??? ??? ??? ??? ??? ?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-i_active樣式幻燈片才會(huì)顯示出來(lái)，否則在左邊隱藏。
?? ??? ??? ??? ??? ?// 只有添加了ctrl-i_active樣式控制按鈕才會(huì)顯示對(duì)應(yīng)的效果，否則小圖片不顯示。
?? ??? ??? ??? ??? ?main.className += ' main-i_active';
?? ??? ??? ??? ??? ?ctrl.className += ' ctrl-i_active';
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?7.2、替換main_background的背景圖片，之前這張背景圖片一直是{{index}}.jpg
?? ??? ??? ??? ??? ??? ?這里動(dòng)態(tài)的修改為當(dāng)前切換的圖片。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?setTimeout(function(){
?? ??? ??? ??? ??? ??? ?g("main_background").innerHTML = main.innerHTML;
?? ??? ??? ??? ??? ?},500);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*
?? ??? ??? ??? ?6、動(dòng)態(tài)調(diào)整圖片的margin-top以使其垂直居中(如果沒(méi)有設(shè)置垂直居中，
?? ??? ??? ??? ?圖片下面沒(méi)有顯示出來(lái)，overflow部分隱藏了，上面我們不想看到的區(qū)域顯示出來(lái)了)
?? ??? ??? ??? ?*/
?? ??? ??? ??? ?function movePicture(){
?? ??? ??? ??? ??? ?var pictures = g(".picture");
?? ??? ??? ??? ??? ?for(i = 0; i < pictures.length; i ++){
?? ??? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ??? ?實(shí)現(xiàn)圖片垂直居中的原理是：
?? ??? ??? ??? ??? ??? ?把圖片的中心放在距離頂部50%的位置，這樣才能實(shí)現(xiàn)垂直居中。
?? ??? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ??? ?pictures[i].style.marginTop = (-1 * pictures[i].clientHeight/2) + "px";
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?// 4、定義還是幻燈片輸出（必須頁(yè)面所有元素加載完成后開(kāi)始）
?? ??? ??? ??? ?window.onload = function(){
?? ??? ??? ??? ??? ?addSliders();
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?一定要有這個(gè)調(diào)用，否則頁(yè)面加載后沒(méi)有點(diǎn)擊控制按鈕的話，是沒(méi)有幻燈片的。
?? ??? ??? ??? ??? ?這里默認(rèn)就顯示第一張圖片。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?switchSlider(4);
?? ??? ??? ??? ??? ?/*
?? ??? ??? ??? ??? ?為什么要推遲100毫秒再執(zhí)行呢？因?yàn)閳D片按鈕都是動(dòng)態(tài)生成的， 因此必須保證
?? ??? ??? ??? ??? ?所有的按鈕都生成完畢后再執(zhí)行這個(gè)方法。
?? ??? ??? ??? ??? ?*/
?? ??? ??? ??? ??? ?setTimeout(function(){
?? ??? ??? ??? ??? ??? ?movePicture();
?? ??? ??? ??? ??? ?},100);
?? ??? ??? ??? ?}
?? ??? ??? ?</script>
?? ??? ?</div>
?? ?</body>
</html>