<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <style> *{padding: 0; margin: 0;} body{padding: 50px 0; background-color: #FFF; font-size: 14px; font-family: "微軟雅黑"; color: #555;? -webkit-font-smoothing: antialiased;/*字體抗鋸齒*/} .slider .main, .slider{width: 100%; height: 400px; position: relative;} .slider .main{overflow: hidden;} .slider .main .main-i{} .slider .main .main-i img{width: 100%; position: absolute; left: 0; top: 50%; z-index: 1;} .slider .main .main-i .caption{position: absolute; right: 60%; top: 10%; 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: arial;} .slider .ctrl{width: 100%; height: 13px; line-height: 13px; text-align: center; position: absolute; left: 0; bottom: -13px;} .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: 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;} .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{opacity: 0; -webkit-transition: all 1s .8s;} .slider .main .main-i_active{opacity: 1; right: 0;} .slider .main .main-i_active h2, .slider .main .main-i_active h3{margin-right: 0px; opacity: 1;} .slider .main .main-i .active{ margin-right: 13%; } </style> <title></title> </head> <body> <div class="slider"> <div class="main" id="template_main"> <div class="main-i" id="main_{{index}}"> <div class="caption"> <h2>{{h2}}</h2> <h3>{{h3}}</h3> </div> <img src="img/{{index}}.jpg" class="picture" /> </div> </div> <div class="ctrl" id="template_ctrl"> <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="img/{{index}}.jpg" /></a>? </div> <script type="text/javascript"> var date = [ {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'}, ]; //通用函數(shù) var g = function ?(id) { if( id.substr(0,1) == '.' ){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?return document.getElementsByClassName(id.substr(1)); } return document.getElementById(id); } //添加幻燈片的操作 function addSliders(){ //獲取所有模板 var tpl_main = g('template_main').innerHTML ? ? ? ? ? ? ? ? ?.replace(/^\s*/,'') ? ? ? ? ? ? ? ? ?.replace(/\s*$/,''); var tpl_ctrl = g('template_ctrl').innerHTML ? ? ? ? ? ? ? ? ?.replace(/^\s*/,'') ? ? ? ? ? ? ? ? ?.replace(/\s*$/,'');? ? ? ? ? //定義最終輸出HTML變量? ? ? ? ? var out_main = [];? ? ? ? ? var out_ctrl = [];? ? ? ? ? ? ? ? ? ? 遍歷所有數(shù)據(jù),構(gòu)建最終輸出的HTML? ? ? ? ? for( i in date ){? ? ? ? ? var _html_main = tpl_main? ? ? ? ? ? ? ? ? .replace(/{{index}}/g,date[i].img)? ? ? ? ? ? ? ? ? .replace(/{{h2}}/g,date[i].h1)? ? ? ? ? ? ? ? ? .replace(/{{h3}}/g,date[i].h2);? ? ? ? ? ? ? ? ??? ? ? ? ? var _html_ctrl = tpl_ctrl? ? ? ? ? ? ? ? ? .replace(/{{index}}/g,date[i].img); ? ? ? ? ? ? ? ? ? ? ? ? out_main.push(_html_main); ? ? ? ? ? ? out_ctrl.push(_html_ctrl);? ? ? ? ? }? ? ? ? ? //把HTML回寫到對(duì)應(yīng)的DOM里面? ? ? ? ? g('template_main').innerHTML = out_main.join('');? ? ? ? ? g('template_ctrl').innerHTML = out_ctrl.join(''); } //幻燈片切換 function switchSlider(n){ //獲得要展現(xiàn)的幻燈片&控制按鈕DOM var main = g('main_'=n); var ctrl = g('ctrl_'=n); //獲得所有的幻燈片以及控制按鈕 var clear_main = g('.main-i'); var clear_ctrl = g('.ctrl-i'); //清除他們的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',''); } //為當(dāng)前控制按鈕和幻燈片附加樣式 main.className += ' main-i_active'; ctrl.className += ' ctrl-i_active'; } //動(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' } } //定義何時(shí)處理幻燈片輸出 window.onload = function(){ addSliders(); switchSlider(2); setTimeout(function(){ movePictures(); },100) } </script> </div> </body></html>
為什么我圖片還是顯示不出來(lái)，不能完成幻燈片效果
蝎子阿呆
2016-10-12 23:44:30
