Cannot read property 'className' of undefined
调试 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>
qq_如鱼饮水_21回答
-
_游戏人生_
会有人这么耐心读这段代码吗？不读的点个赞吧?
随时随地看视频慕课网APP
相关分类
JavaScript