JS代码出错，就大神讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.slide,
.main,
.main-i{
width: 100%;
height: 500px;
}
.slide{
position: relative;
}
.slide .main{
overflow: hidden;
}
.slide .main .main-i{
opacity: 0;
position: absolute;
top: 0;
right: 50%;
transition: all .5s;
}
.slide .main .main_active{
right: 0;
opacity: 1;
}
.slide .main .main_active h2,
.slide .main .main_active h3{
opacity: 1;
margin-right: 0;
}
.slide .main .main-i h2,
.slide .main .main-i h3{
transition: all .5s .8s;
}
.slide .main .main-i img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.caption{
position: absolute;
right: 50%;
top: 30%;
z-index: 2;
}
.caption h2{
font-family: "微软雅黑";
font-size: 40px;
line-height:50px;
color: #000;
text-align: right;
margin-right: 45px;
opacity: 0;
}
.caption h3{
font-family: "微软雅黑";
font-size: 60px;
line-height: 60px;
color: #000;
text-align: right;
margin-right: -45px;
opacity: 0;
}
.ctrl{
width: 100%;
height: 13px;
position: absolute;
bottom: -13px;
left: 0;
text-align: center;
}
.ctrl .ctrl-i{
display: inline-block;
width: 150px;
height: 15px;
background-color: #333;
position: relative;
}
.ctrl .ctrl-i:hover{
background-color: #999;
}
.ctrl .ctrl_active:hover,
.ctrl .ctrl_active{
background-color: #333;
}
.slide .ctrl .ctrl_active:hover img,
.slide .ctrl .ctrl_active img{
opacity: 0;
}
.ctrl .ctrl-i:hover img{
opacity: 1;
bottom: 13px;
}
.ctrl .ctrl-i img{
width: 100%;
position: absolute;
bottom: 50px;
left: 0;
opacity: 0;
transition: all .5s;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<h2>怀王</h2>
<h3>仙福永享。</h3>
</div>
<img src="1.jpg">
</div>
<div>
<div>
<h2>怀王</h2>
<h3>仙福永享。</h3>
</div>
<img src="2.jpg">
</div>
<div>
<div>
<h2>怀王</h2>
<h3>仙福永享。</h3>
</div>
<img src="3.jpg">
</div>
</div>
<div id="ctrl">
<a href="#" index="0">
<img src="1.jpg">
</a>
<a href="#" index="1">
<img src="2.jpg">
</a>
<a href="#" index="2">
<img src="3.jpg">
</a>
</div>
</div>
<script type="text/javascript">
function g(cls,parent){
var oparent=parent?document.getElemengById('parent'):document;
var eles=[];
var elements=oparent.getElementsByTagName('*');
for(var i=0;i<elements.length;i++){
if(elements[i].className==cls){
eles.push(elements[i]);
}
}
return eles;
}
window.onload=function(){
var main=g('main-i');
var ctrl=g('ctrl-i');
for(var i=0;i<ctrl.length;i++){
ctrl[i].onclick=function(){
var myindex=parseInt(this.getAttribute('index'));
var main=g('main-i');
var ctrl=g('ctrl');
for (var i = 0; i < ctrl.length; i++) {
ctrl[i].className.replace(" ctrl_active","");
main[i].className.replace(" main_active","");
}
this.className+=" ctrl_active";
main[myindex].className+=" main_active";
}
}
}
</script>
</body>
</html>
zzZyq3回答
-
林方清i
没格式，不想看 -
蛋加树
代码太长了，无关的又多，不看了，给你思路吧。可以在按钮处写onclick事件，事件发生时执行相应的方法，在方法中获取到要换类名的元素，给元素的class属性重新赋值（也就是换类名）。 -
zzZyq
我就想点击按钮 换下类名 求大神解答
随时随地看视频慕课网APP
相关分类
JavaScript