调试 clear_ctrl[i].className=clear_ctrl[i].className.replace(' ctrl-i_active','');这段语句类没定义<!DOCTYPE html><html><head><meta charset="UTF-8"><title>幻灯片效果</title><style type="text/css">*{margin: 0;padding: 0;}body{margin: 20px 0;font-family: "Avenir Next";font-size: 14px;color: #555;background-color: #fff;-webkit-font-smoothing:antialiased;}.slider .main .main-i,.slider .main,.slider{width: 100%;height: 400px;position: relative;z-index: 2;}.slider .main .main-i,.slider .main{overflow: hidden;} .slider .main .main-i .caption{ position: absolute; left:20%; top: 50px; z-index: 9; } .slider .main .main-i .caption h2{ margin-right: 100px; font-size: 40px;line-height:50px;color: #B5B5B5;text-align: right; } .slider .main .main-i .caption h3{ margin-right: -100px; font-size: 70px;line-height:70px;color: #000000;text-align: right;font-family: "Open Sans Condensed"; } .slider .main .main-i img{ position: absolute; top:50%; } .slider .ctrl{ width: 100%; height: 13px; line-height: 13px; text-align: center; position: absolute; left: 0; bottom: -13px; z-index: 6; } .slider .ctrl .ctrl-i{ display: inline-block; width: 150px; height: 13px; background-color: #999; box-shadow: 0 1px 1px rgba(0,0,0,.3); position: relative; margin-right: 2px; } .slider .ctrl .ctrl-i img{ width: 100%; position: absolute; bottom: 50px; left: 0; opacity: 0; -webkit-transition:all .3s; } .slider .ctrl .ctrl-i:hover img{ opacity: 1; -webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,.3)) ); } .slider .ctrl .ctrl-i:hover{background-color: #f0f0f0;}.slider .ctrl .ctrl-i_active:hover,.slider .ctrl .ctrl-i_active{ /*交集选择器之间的空格是必须的，否则不出效果*/background-color: #000000;}.slider .main .main-i{opacity: 0;position: absolute;right: 50%;top: 0;-webkit-transition:all .5s;z-index: 2;} /* #main_background，*/.slider .main .main-i_active{opacity: 1;right: 0;}#main_background{z-index: -1；}.slider .main .main-i .caption h2,.slider .main .main-i .caption h3{opacity: 0;-webkit-transition:all 1s 0.8s; /*延迟0.8秒*/}.slider .main .main-i_active .caption h2,.slider .main .main-i_active .caption h3{opacity: 1;margin-right: 0;}</style></head><body><div><div id="Template_main"><div id="main_{{index}}"><img src="images/{{index}}.jpg" alt=""><div><h2>{{h2}}</h2><h3>{{h3}}</h3></div></div></div><div id="Template_ctrl"><a id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="images/{{index}}.jpg" alt=""></a></div><script type="text/javascript">var data=[{img:1,h2:"THML",h3:"DHML"},{img:2,h2:"CSS",h3:"DCSS"},{img:3,h2:"javascript",h3:"Dscript"},{img:4,h2:"ajax",h3:"Dajax"},{img:5,h2:"DOM",h3:"DDOM"},{img:6,h2:"BOM",h3:"DBOM"},{img:7,h2:"NS",h3:"DNS"},]; var g=function(id){ if(id.substr(0,1)=='.'){ return document.getElementsByClassName(id.substr(1)); } return document.getElementById(id); } function addSlider(){ 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(i in data){ var _out_main=tpl_main.replace(/{{index}}/g,data[i].img) .replace(/{{h2}}/g,data[i].h2) .replace(/{{h3}}/g,data[i].h3); var _out_ctrl=tpl_ctrl.replace(/{{index}}/g,data[i].img); out_main.push(_out_main); out_ctrl.push(_out_ctrl); } g('Template_main').innerHTML=out_main.join(''); g('Template_ctrl').innerHTML=out_ctrl.join(''); // 增加#main_background,这时候tpl_main还是初始的那时的情况。 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'; } 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 (var 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.className+" main-i_active"; ctrl.className=ctrl.className+" ctrl-i_active"; } // 调整所有大图向上移动 function movePictures(){ var pictures=g('.pictures'); for (var i = 0; i < pictures.length; i++) { pictures[i].style.marginTop=(-1*pictures[i].clientHeight/2)+"px"; } } window.onload=function(){ addSlider(); switchSlider(1); setTimeout(function(){ movePictures(); },100); }</script></div></body></html>
添加回答
举报
0/150
提交
取消