                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS+CSS3實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果

為什么我的寫好后成這樣啊

代碼：

<!DOCTYPE html>
<html>
<head>
??? <meta http-equiv="Content-Type" content="text/html">
?? ?<title>Preview Slideshow</title>
?? ?<style type="text/css">
?? ???? *{
?? ??? ??? ?padding: 0;
?? ??? ??? ?margin: 0;
?? ???? }
?? ???? body{
?? ??? ??? ?padding: 50px 0;
?? ??? ??? ?background-color:#FFF;
??????????? font-size: 14px;
??????????? font-family: 'Avenir Next';
??????????? color:#555;
??????????? -webkit-font-smoothing: antialiased;
?? ???? }
?? ???? .slider .main .main-i,
?? ???? .slider .main,
?? ???? .slider{
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: 400px;
?? ??? ??? ?position: relative;
?? ???? }
?? ???? /*幻燈片區(qū)域*/
?? ???? .slider .main{
?? ??? ??? ?overflow: hidden;
?? ???? }
?? ???? /*每一個(gè)幻燈片的樣式*/
??????? .slider .main .main-i{
?????? ??? ?float: left;
??????? }
??????? .slider .main .main-i img{
?????? ??? ?width: 100%;
?????? ??? ?position: absolute;
?????? ??? ?left: 0;
?????? ??? ?top: 0;
?????? ??? ?z-index: 1;
??????? }
??????? .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: #000000;
?????? ??? ?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;
?? ???? }
?? ???? .slider .ctrl .ctrl-i{
?? ??? ??? ?position: relative;
?? ??? ??? ?display: inline-block;
?? ??? ??? ?width: 150px;
?? ??? ??? ?height: 13px;
?? ??? ??? ?background-color: #666;
?? ??? ??? ?box-shadow: 0,1px 1px rgba(0,0,0,.3);
?? ??? ??? ?margin-left: 0.5px;
?? ???? }
?? ???? .slider .ctrl .ctrl-i img{
?? ??? ??? ?width: 100%;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 0;
?? ??? ??? ?bottom: 50px;
?? ??? ??? ?z-index: 1;
?? ??? ??? ?opacity: 0;
?? ??? ??? ?-webkit-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,
??????????????????? from(transparent),
??????????????????? color-stop(50%,transparent),
??????????????????? to(rgba(255,255,255,.3))
??????????????? );
?? ??? ??? ?opacity: 1;
?? ???? }
?? ???? /*active 當(dāng)前展現(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;
?? ??? ??? ?position: absolute;
?? ??? ??? ?right: 50%;
?? ??? ??? ?top: 0;
?? ??? ??? ?-webkit-transition: all .5s;
?? ???? }
?? ???? .slider .main .main-i h2{
?? ??? ??? ?margin-right: 45px;
?? ???? }
?? ???? .slider .main .main-i h3{
?? ??? ??? ?margin-right: -45px;
?? ???? }
?? ???? .slider .main .main-i h2,
?? ???? .slider .main .main-i h3{
?? ??? ??? ?-webkit-transition: all .8s 1s;
?? ???? }
?? ???? .slider .main .main-i_active{
?? ??? ??? ?opacity: 1;
?? ??? ??? ?right: 0;
?? ???? }
?? ???? .slider .main .main-i_active h2,
?? ???? .slider .main .main-i_active h3{
?? ??? ??? ?margin-right: 0;
?? ???? }
?? ?</style>
</head>
<body>
<div class="slider">

?? ?<div class="main" id="template_main">
?? ??? ?<div class="main-i main-i_active" id="main_{{index}}">
?? ??? ??? ?<div class="caption">
?? ??? ??? ??? ?<h2>{{h2}}</h2>
?? ??? ??? ??? ?<h3>{{h2}}</h3>
?? ??? ??? ?</div>
?? ??? ??? ?<img src="img/{{index}}.jpg">
?? ??? ?</div>
?? ?</div>
?? ?<div class="ctrl" id="template_ctrl">
?? ??? ?<a href="javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}">
?? ??? ??? ?<img src="img/{{index}}.jpg" alt="">
?? ??? ?</a>
?? ?</div>
</div>
<script type="text/javascript">

??? //1.數(shù)據(jù)定義（實(shí)際生產(chǎn)環(huán)境中，應(yīng)由后臺(tái)給出）
?? ?var data = [
??????? {img:1,h1:'Creative',h3:'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:'PRIEND'}
?? ?];
?? ?
??? //2.通用函數(shù)
??? var g = function(id){
?? ??? ?if (id.substr(0,1)=='.') {
?? ??? ??? ?return document.getElementsByClassName(id.substr(1));
?? ??? ?};
?? ??? ?return document.getElementById(id);
??? }

??? //3.添加幻燈片的操作，（所有幻燈片&對(duì)應(yīng)的按鈕）
??? 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ù)，構(gòu)建最終輸出的HTML
?? ??? ?for(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 );
?? ??? ??? ?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('');

??? }

??? //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清除他們的樣式
??????? 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', '');
??????? }
??????? //為當(dāng)前按鈕和幻燈片附加樣式
?? ??? ?main.className +='main-i_active';
?? ??? ?ctrl.className +='ctrl-i_active';
??? }

??? //4.定義何時(shí)處理幻燈片輸出
??? window.onload = function(){
?? ??? ?addSliders();
??? }
</script>
</body>
</html>