<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { 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 .ctrl, .slider .main, .slider { width: 100%; height: 400px; position: relative; } /* 幻灯片区域样式 */ .slider .main { overflow: hidden; } .slider .main .main-i img { width: 100%; position: absolute; left: 0; top: 50%; 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'; } /* 控制按钮区域样式 */ .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; } /* active 当前展现的状态 */ .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: 0; opacity: 1; } .slider .main .main-i .caption { margin-right: 13%; } </style></head><body> <div class="slider"> <!-- 0.修改 VIEW->Template(关键字替换) --> <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="image/{{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="image/{{index}}.jpg" /> </a> </div> </div></body><script> // 1.数据定义 var data = [{ img: '1', h2: 'Creative', h3: 'DUET' }, { img: 2, h2: 'Friendly', h3: 'DEVIL' }, { img: 3, h2: 'Tranquilent', h3: 'COMPATRIOT' }, { img: 4, h2: 'Insecure', h3: 'HUSSLER' }, { img: 5, h2: 'Loving', h3: 'REBEL' }, { img: 6, h2: 'Passionate', h3: 'SEEKER' }, { img: 7, h2: 'Crazy', h3: 'FRIEND' } ]; // 2.通用函数 var g = function (id) { if (id.substr(0, 1) == '.') { return document.getElementsByClassName(id.substr(1)); } return document.getElementById(id); } // 3.添加幻灯片的操作（所有幻灯片&对应的按钮） function addSliders() { // 3.1获取模板 // 3.1.1清除开始和结尾空白字符 --幻灯片 var tpl_main = g('template_main').innerHTML .replace(/^\s*/, '') .replace(/\s*$/, ''); // 3.1.2清除开始和结尾空白字符 --幻灯片控制按钮 var tpl_ctrl = g('template_ctrl').innerHTML .replace(/^\s*/, '') .replace(/\s*$/, ''); // 3.2定义最终输出的HTML的变量 var out_main = []; var out_ctrl = []; // 3.3遍历所有数据，构建最终输出的HTML // 3.3.1把幻灯片中的img,h2,h3替换成{{index}},{{h2}},{{h3}}中的内容 for (i in data) { var _html_main = tpl_main .replace(/{{index}}/g, data[i].img) .replace(/{{h2}}/g, data[i].h2) .replace(/{{h3}}/g, data[i].h3); // 3.3.2把幻灯片控制按钮中的img替换成{{index}}中的内容 var _html_ctrl = tpl_ctrl .replace(/{{index}}/g, data[i].img); out_main.push(_html_main); out_ctrl.push(_html_ctrl); } // 3.4 把HTML回写到对应的DOM里面 g('template_main').innerHTML = out_main.join(''); g('template_ctrl').innerHTML = out_ctrl.join(''); } // 5.幻灯片切换 function switchSlider(n) { // 5.1获得要展现的幻灯片&控制按钮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('main-i_active', ''); } // 5.4为当前控制按钮和幻灯片附加样式 main.className += 'main-i_active'; ctrl.className += 'ctrl-i_active'; } // 6. 动态调整图片的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(2); setTimeout(function () { movePictures(); }, 100) }</script></html>
