<body> <div class="slider"> <!--0.修改 VIEW -> Template(关键字替换)，增加template id--> <div class="main" id="template_main"> <div class="main-i main-i_active" id="main_{{index}}"> <div class="caption"> <h2>{{h2}}</h2> <h3>{{h3}}</h3> </div> <img src="images/{{index}}.jpg" class="picture"> </div><!--/*/*main-i的结束**/--> </div><!--/*main的结束*/--> <div class="ctrl" id="template_ctrl"> <a class="ctrl-i" href="javascript:switchSlider({{index}});" id="ctrl_{{index}}"><img src="images/{{index}}.jpg"></a> <!--控制槽里面有预览图所以插入相同的图片--> </div><!--/*控制按钮的结束*/--> </div></body>------------------------------------------------------这段是我的html代码----------------------------------------------------------------------------------------------下面这段是js 代码----------------------------------------//1.数据定义（实际环境应有后台给出）var data = [ {img:1,h1:'lllllla',h2:'1113212'}, {img:2,h1:'lllllls',h2:'111321212'}, {img:3,h1:'lllllld',h2:'111212'}, {img:4,h1:'llllllf',h2:'1113212'}, {img:5,h1:'llllllx',h2:'11131212'}, {img:6,h1:'lllllls',h2:'11112'}, {img:7,h1:'lllllla',h2:'1113212'}];//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 获取模板 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 遍历所有数据，构建最终输出的HTML for(var i = 0;i < data.length;i++) { var _html_main = tpl_main.replace(/{{index}}/g,data[i].img).replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2); //替换临时变量，g表示全局替换 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('');//所有控制按钮 //7. 增加#main_background，把切换时显示的白色背景替换成上一张的图片 g('template_main').innerHTML += tpl_main.replace(/{{index}}/g,'{{index}}').replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2); g('main_{{index}}').id = 'main_background';}//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(var i=0;i<clear_ctrl.length;i++) { clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active',''); clear_main[i].className = clear_main[i].className.replace(' main-i_active','') } //5.4 为当前控制按钮和幻灯片附加样式 main.className += ' main-i_active'; ctrl.className += ' ctrl-i_active';} //6.动态调整图片的 margin-top 使其垂直居中 function movePicture() { var pictures = g('.picture'); for(var 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(){movePicture();},100);}老师哪里说的是切换图片的时候会显示白色背景，而章节目的是在切换的时候会显示上一张幻灯片的图片，要创建一个新的div但是div 里面的格式是如何我不知道怎么写了
1 回答
已采纳
q_Amily
TA贡献1条经验 获得超0个赞
//7.增加#main-background-----切换过渡的背景图片
g('template_main').innerHTML += tpl_main
.replace(/{{index}}/g,'{{index}}')
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3);
g('main_{{index}}').id='main_background';
}
不知道你说的是不是这样，顺便把样式也粘贴给你
#main_background{
right: 0;
opacity: 1;
z-index: 1;
}
添加回答
举报
0/150
提交
取消