最近在学网页的幻灯片特效但是在优化中遇到了一些问题求帮助！！
<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 里面的格式是如何我不知道怎么写了
Stitch晨1回答
-
q_Amily
//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; }
随时随地看视频慕课网APP
Html/CSS
JavaScript