<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> 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: 'Passionate', h2: 'SEEKER' }, { img: 7, h1: 'Crazy', h2: 'FRIEND' } ]; 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*$/,''); var out_main = []; var out_ctrl = []; 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); var _html_ctrl = tpl_ctrl .replace(/{{index}}/g, data[i].img); out_main.push(_html_main); out_ctrl.push(_html_ctrl); } g('template_main').innerHTML = out_main.join(''); g('template_ctrl').innerHTML = out_ctrl.join(''); } function switchSlider(n) { var main = g('main_' + n); var ctrl = g('ctrl_' + n); var clear_main = g('.main-i'); var clear_ctrl = g('.ctrl-i'); for(i = 0; i < clear_main.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', '');; } main.className += 'main-i_active'; ctrl.className += 'ctrl-i_active'; } window.onload = function() { addSliders(); } </script> </head> <body> <div class="slider"> <div class="main" id="template_main"> <div class="main-i" id="main_{{index}}"> <div class="caption"> <h2 class="caption_h2">{{h2}}</h2> <h3 class="caption_h3">{{h3}}</h3> </div> <img src="img/{{index}}.jpg"> </div> </div> <div class="ctrl" id="template_ctrl"> <a href="" class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}})"><img src="img/{{index}}.jpg"></a> </div> </div> </body></html>
添加回答
举报
0/150
提交
取消