為何沒(méi)有代碼可以下載的代碼供參考？
為何沒(méi)有代碼可以下載的代碼供參考？
an202
2015-06-13
1 回答
舉報(bào)
0/150
提交
取消
2015-06-28
<!DOCTYPE html>
<htmml>
<head>
??? <title>
??? shopping web
??? </title>
??? <meta charset="utf-8">
??? <style>
??? *{padding:0;margin:0}
??? body{
??? padding:50px 0;
??? background-color: #FFF;
??? font-size: 14px;
??? font-family: 'Avenir Next';
??? color: #555; ;
??? -webkit-font-smoothing: antialised;/*字體抗鋸齒*/
??? }
??? .main-i,
??? .main,
??? .slider{
??????? width:? 100%;
??????? height:? 400px;
??????? position: relative;
??? }
??? /*幻燈片區(qū)域*/
??? .main{
??????? overflow: hidden;
??? }
??? /*每一個(gè)幻燈片的樣式*/
??? .main-i{}
??? .main-i img{
??????? width: 100%;
??????? position: absolute;
??????? left: 0;
??????? top: 50%;
??? }
??? .caption{
??????? position: absolute;
??????? right: 50%;
??????? top: 30%;
??????? z-index: 9;
??? }
??? .caption h2{
??????? font-size: 40px;
??????? line-height: 50px;
??????? color: #B5B5B5;
??????? text-align: right;
??? }
??? .caption h3{
??????? font-size: 70px;
??????? line-height: 70px;
??????? color: #000000;
??????? text-align: right;
??????? font-family: 'Open Sans Condensed';
??? }
??? /*控制按鈕區(qū)域*/
??? .ctrl{
??????? width: 100%;
??????? height: 13px;
??????? line-height: 13px;
??????? text-align: center;
??????? position: absolute;
??????? left: 0;
??????? bottom: -13px;
?????? ?
??? }
??? .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;
??? }
??? .ctrl-i img{
??????? width: 100%;
??????? position: absolute;
??????? left: 0;
??????? bottom: 50px;
??????? z-index: 1;
??????? opacity: 0;
??????? -webkit-transition:all .2s;
???? ?
??? }
??? /*hover 到控制按鈕的樣式*/
??? .ctrl-i:hover{
??????? background-color: #F0F0F0;
??? }
??? .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;
??? }
??? /*當(dāng)前展現(xiàn)的狀態(tài)*/
??? .ctrl-i_active:hover,
??? .ctrl-i_active{
??????? background-color: #000;
??? }
??? .ctrl-i_active:hover img{
??????? opacity: 0;
??? }
??? /*幻燈片切換的樣式*/
??? .main-i{
??????? opacity: 0;
??????? position: absolute;
??????? right: 50%
??????? top:0;
??????? -webkit-transition:all .5s;
??? }
??? .main-i h2{
??????? margin-right: 45px;
??? }
??? .main-i h3{
??????? margin-right: -45px;
??? }
??? .main-i_active h2,
??? .main-i_active h3{
??????? opacity: 0;
??????? -webkit-transition:all 1s .8s;
??? }
??? .main-i_active{
??????? right: 0;
??????? opacity: 1;
??? }
??? .main-i_active h2,
??? .main-i_active h3{
??????? margin-right: 0px;
??????? opacity: 1;
??? }
??? .caption{
??????? margin-right: 13%;
??? }
??? </style>
??? </head>
<body>
?? <div class="slider">
??? <!-- 0.修改 VIEW->Template(關(guān)鍵字替換)，增加 template id -->
??????? <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">
??????? //1.數(shù)據(jù)定義（實(shí)際生產(chǎn)環(huán)境中，應(yīng)有后臺(tái)給出）
??????? var data = [
??????? {img:1,h1:'Creative',h2:'UUET'},
??????? {img:2,h1:'Friendly',h2:'DEVIL'},
??????? {img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
??????? {img:4,h1:'Insercure',h2:'HUSSLER'},
??????? {img:5,h1:'LOving',h2:'REBRL'},
??????? {img:6,h1:'Passionate',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);
??????? }
??????? //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 回寫(xiě)到對(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清楚他們的 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','');
??????? }
??????? //5.4 為當(dāng)前控制按鈕和幻燈片添加附加樣式
??????? main.className += ' main-i_active';
??????? ctrl.className += ' ctrl-i_active';
??????? }
??????? //6.動(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'
??????????? }
??? }
???????? //4.定義合適處理幻燈片輸出
??????? window.onload = function(){
??????????? addSliders();
??????????? switchSlider(1);
??????????? setTimeout(function(){
??????????????? movePictures();
??????????? },100)
??????? }
??? </script>
??? </div>
??? </body>
</html>