在這個案例的基礎(chǔ)上增加了 自動輪播、導(dǎo)航箭頭控制輪播以及將 HTML中控制按鈕中的 switchSlider 移到了js文件中，從而實現(xiàn)結(jié)構(gòu)、行為的分離
demo.html
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<title>JS+CSS3實現(xiàn)帶預(yù)覽圖幻燈片效果</title>
????<link?rel="stylesheet"?href="main.css">
</head>
<body>
<!--?修改view轉(zhuǎn)換為模版,關(guān)鍵字替換?-->
????<div?class="slider">
???? <div?class="main"?id="template_main">
???? <div?class="main-i?{{css}}"?id="main_{{index}}">
???? <div?class="caption">
<h2>{{h2}}</h2>
???? <h3>{{h3}}</h3>
???? </div>
???? <img?class="picture"?src="imgs/{{index}}.jpg"?alt="">
???? </div>
???? </div>
???? <div?class="ctrl"?id="template_ctrl">
???? <a?class="ctrl-i"?id="ctrl_{{index}}"?href="javascript:;">
???? <img?src="imgs/{{index}}.jpg"?alt="">
???? </a>
???? </div>
????????<!--?幻燈片左右箭頭?-->
????????<a?class="arrow"?id="prev"?href="javascript:;"><</a>
????????<a?class="arrow"?id="next"?href="javascript:;">></a>
????</div>
????<script?src="main.js"></script>
</body>
</html>main.css
/*?初始化代碼?*/
*?{
????margin:?0;
????padding:?0;
}
body?{
????padding:?50px?0;
????background-color:?#fff;
????font-size:?14px;
????font-family:?'Avenir?Next';
????color:?#555;
????-webkit-font-smoothing:?antialiased;
}
/*?初始化代碼結(jié)束?*/
.slider,.slider?.main,.slider?.main?.main-i?{
????width:?100%;
????height:?400px;
????position:?relative;
}
/*?幻燈片區(qū)域?*/
.slider?.main?{
????overflow:?hidden;
}
/*?每一個幻燈片的樣式?*/
.slider?.main?.main-i?{
????position:?relative;
}
.slider?.main?.main-i?img?{
????width:?100%;
????position:?absolute;
????z-index:?1;
????top:?50%;
????left:?0;
}
.slider?.main?.main-i?.caption?{
????position:?absolute;
????right:?50%;
????top:?30%;
????z-index:?9;
}
.slider?.main?.main-i?.caption?h2?{
????font-size:?40px;
????line-height:?50px;
????color:?#b5b5b5;
????text-align:?right;
}
.slider?.main?.main-i?.caption?h3?{
????font-size:?70px;
????line-height:?70px;
????color:?#000;
????text-align:?right;
????font-family:?'Open?Sans?Condensed';
}
/*?控制按鈕區(qū)域?*/
.slider?.ctrl?{
????width:?100%;
????height:?13px;
????line-height:?13px;
????text-align:?center;
????position:?absolute;
????left:?0;
????bottom:?-13px;
????font-size:?0;
}
.slider?.ctrl?.ctrl-i?{
????display:?inline-block;
????width:?150px;
????height:?13px;
????background-color:?#666;
????box-shadow:?0?1px?1px?rgba(0,0,0,.3);
????position:?relative;
????margin-left:?1px;
}
.slider?.ctrl?.ctrl-i?img?{
????width:?100%;
????position:?absolute;
????left:?0;
????bottom:?50px;
????z-index:?9;
????opacity:?0;
????transition:?all?.2s;
}
/*?hover?到控制按鈕?*/
.slider?.ctrl?.ctrl-i:hover?{
????background-color:?#f0f0f0;
}
.slider?.ctrl?.ctrl-i:hover?img?{
????bottom:?13px;
????/*添加倒影-沒有*/
????-webkit-box-reflect:?below?0px?-webkit-gradient(linear,left?top,left?bottom,form(transparent),color-stop(50%),transparent),to(rgba(255,255,255,.3));
????opacity:?1;
}
/*?active?按鈕展現(xiàn)時的狀態(tài)*/
.slider?.ctrl?.ctrl-i_active:hover,
.slider?.ctrl?.ctrl-i_active?{
????background-color:?#000;
}
.slider?.ctrl?.ctrl-i_active:hover?img?{
????opacity:?0;
}
/*?幻燈片切換的樣式?*/
.slider?.main?.main-i?{
????opacity:0;
????right:?50%;
????position:?absolute;
????transition:?all?0.5s;
????z-index:?2;
}
/*它的位置不同優(yōu)先級就不同，要把握時機，避免不必要的覆蓋*/
.slider?.main?.main-i_right?{
????right:?-50%;
}
.slider?.main?.main-i_active,#main_background?{
????opacity:?1;
????right:?0;
????top:?0;
????z-index:?2;
}
#main_background?{
????z-index:?1;
}
.slider?.main?.main-i?.caption?h2{
????margin-right:?45px;
????transition:?all?1s?0.8s;
????opacity:?0;
}
.slider?.main?.main-i?.caption?h3?{
????margin-right:?-45px;
????transition:?all?1s?0.8s;
????opacity:?0;
}
.slider?.main?.main-i_active?.caption?h2,.slider?.main?.main-i_active?.caption?h3?{
????margin-right:?0;
????opacity:?1;
}
.slider?.main?.main-i?.caption?{
????margin-right:?13%;
}
/*?幻燈片左右剪頭?*/
.arrow?{
????display:?none;
????position:?absolute;
????z-index:?10;
????top:?0;
????width:?60px;
????height:?60px;
????line-height:?60px;
????text-align:?center;
????background-color:?rgba(0,0,0,.2);
????text-decoration:?none;
????font-size:?30px;
????color:?#fff;
????font-weight:?bold;
}
.arrow:hover?{
????background-color:?rgba(0,0,0,.5);
}
#prev?{
????top:?50%;
????left:?3%;
????margin-top:?-20px;
}
#next?{
????right:?3%;
????top:?50%;
????margin-top:?-20px;
}
.slider:hover?.arrow?{
????display:?inline-block;
}main.js
/*數(shù)據(jù)定義-從后臺加載數(shù)據(jù)*/
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:?'Passionsate',
????h2:?'SEEKER'
},?{
????img:?7,
????h1:?'Crazy',
????h2:?'FRIEND'
},?];
/*2.定義通用函數(shù)*/
var?g?=?function(id){
????if(id.substr(0,1)?==?'.'){
????????return?document.getElementsByClassName(id.substr(1));
????}
????return?document.getElementById(id);
};
/*?8.1獲取導(dǎo)航箭頭元素??和?定義當前頁面索引index?*/
var?prev?=?g('prev');
var?next?=?g('next');
var?index?=?1;
var?timer;?//計時器標識
var?slid?=?g('.slider')[0];?//此處得到的是一個偽數(shù)組
/*?3.添加幻燈片的操作?（所有幻燈片以及對應(yīng)的按鈕）?*/
function?addSliders(){
????//3.1?獲取模版
????var?tpl_main?=?g('template_main').innerHTML.replace(/^\s*|\s*$?/,'');
????var?tpl_ctrl?=?g('template_ctrl').innerHTML.replace(/^\s*|\s*$/,'');
????//?3.2?定義最終輸出的HTML變量
????var?out_main?=?[];
????var?out_ctrl?=?[];
????//?3.3?遍歷所有數(shù)據(jù)，構(gòu)建最終輸出的HTML
????for(var?i?in?data)?{
????????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?回寫到對應(yīng)的DOM里面
????g('template_main').innerHTML?=?out_main.join('');
????g('template_ctrl').innerHTML?=?out_ctrl.join('');
????//?增加#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_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?為當前控制按鈕和幻燈片附加樣式
????main.className?+=?'?main-i_active';
????ctrl.className?+=?'?ctrl-i_active';
????//?7.2切換時復(fù)制上一張幻燈片到?#main_background中
????setTimeout(function(){
????????g('main_background').innerHTML?=?main.innerHTML;
????},1000);
}
/*?9.給所有的控制按鈕添加click事件?*/
????function?buttonsClick(){
????????var?buttons?=?g('.ctrl-i');
????????var?myIndex;//找到點擊的是第幾張圖片
????????for(var?i?=?0;i?<?buttons.length;i++){
????????????buttons[i].onclick=function(){
????????????????myIndex?=?parseInt(this.getAttribute('id').substr(5));
????????????????index?=?myIndex;
????????????????switchSlider(index);
????????????};
????????}
????}
/*?6.動態(tài)調(diào)整圖片的margin-top,以使其垂直居中?*/
function?movePictures(){
????var?pictures?=?g('.picture');
????for(var?i?=?0;i<pictures.length;i++){
????????pictures[i].style.marginTop?=?-(pictures[i].clientHeight?/?2?)+?'px';
????}
}
/*?8.為兩個導(dǎo)航箭頭綁定切換幻燈片的事件?*/
prev.onclick=function(){
????if(index?==?1){
????????index?=?7;
????}else?{
????????index--;
????}
????switchSlider(index);
};
next.onclick?=?function(){
????if(index?==?data.length){
????????index?=?1;
????}else?{
????????index++;
????}
????switchSlider(index);
};
/*?10.自動輪播-模擬導(dǎo)航箭頭點擊事件就可以了?*/
????function?play(){
????????timer?=?setInterval(function(){
????????????next.onclick();
????????},3000);
????}
????function?stop(){
????????clearInterval(timer);
????}
/*?定義何時處理幻燈片輸出?*/
window.onload?=?function(){
????addSliders();
????switchSlider(1);
????buttonsClick();
????/*movePictures();?這樣會不起作用，因為在獲取圖片的時候，可能還不能獲取到，因為圖片是動態(tài)生成的，所以需要等待圖片生成后再執(zhí)行*/
????setTimeout(movePictures,100);
????slid.addEventListener('mouseover',stop,false);
????slid.addEventListener('mouseout',play,false);
????//此處如果清除不了自動輪播，很可能是slid不是一個具體的DOM元素而是一個偽數(shù)組的集合，導(dǎo)致無法綁定事件,因此用?g('.slider')[0]獲取到最外部的.slider容器，必須加上[0]
????play();?//手動啟動一下輪播
};
2016-09-13
main.js中 第46行的注釋寫錯了，你們懂的，不加?[0]得到的是一個偽數(shù)組