                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Tab选项卡切换效果

大家看看哪里有问题？

<!doctype html>

<head>

<title>Document</title>

<style>

*{margin:0;

padding:0;

list-style:none;}

.wrap{height:170px;

width:490px;

margin:60px auto;

overflow: hidden;

position: relative;

}

.wrap ul{position:absolute;}

.wrap ul li{height:170px;}

.wrap ul .hide{display:none;}

.wrap ol{position:absolute;

right:5px;

bottom:10px;}

.wrap ol li{height:20px; width: 20px;

background:#ccc;

border:solid 1px #666;

margin-left:5px;

color:#000;

float:left;

line-height:center;

text-align:center;

cursor:pointer;}

.wrap ol .on{background:#E97305;

color:#fff;}

</style>

window.onload=function(){

var wrap=document.getElementById('wrap');

var pic=document.getElementById('pic');

var imags=pic.getElementsByTagName('li');

var list=document.getElementById('list');

var lis=list.getElementsByTagName('li');

var index=0;

var timer=null;

for(var i=0;i<lis.length;i++){

lis[i].onmouseover=function(){

clearInterval(timer); //鼠标划过时清除定时器

lis[i].index=i;

for(var j=0;j<lis.length;j++){ //初始化所有的li和div标签

imags[j].className="hide";

lis[j].className="";

}

imags[this.index].className="";

this.className="on";

}

lis[i].ommouseout=function(){

timer=setInterval(autoplay,1000);

}

timer=setInterval(autoplay,1000);

function autoplay(){

index1++;

if(index1>=lis.length)

index1=0;

for(var j=0;j<lis.length;j++){

imags[j].className="hide";

lis[j].className="";

}

imags[index1].className="";

lis[index1].className="on";

}

</script>

</head>

<body>

</ul>

</ol>

</div>

</body>

</html>

梧桐笑

2017-09-09

源自：Tab选项卡切换效果 4-1

关注问题我要回答

1358

操作

收起

2 回答

慕斯8234454
2020-05-01

修改如下,错误部分已注释,整个代码可执行

<!doctype html><html><head><meta charset="UTF-8">  <title>Document</title>  <style>*{margin:0;padding:0;list-style:none;}.wrap{height:170px;width:490px;margin:60px auto;overflow: hidden;position: relative;}.wrap ul{position:absolute;}.wrap ul li{height:170px;}.wrap ul .hide{display:none;}.wrap ol{position:absolute;right:5px;bottom:10px;}.wrap ol li{height:20px; width: 20px;background:#ccc;border:solid 1px #666;margin-left:5px;color:#000;float:left;line-height:center;text-align:center;cursor:pointer;}.wrap ol .on{background:#E97305;color:#fff;}</style><script type="text/javascript">window.onload=function(){var wrap=document.getElementById('wrap');var pic=document.getElementById('pic');var imags=pic.getElementsByTagName('li');var list=document.getElementById('list');var lis=list.getElementsByTagName('li');var index=0;var timer=null;//二定义并调用自动播放函数timer=setInterval(autoplay,1000);//四遍历所有数字导航实现划过切换至对应的图片for(var i=0;i<lis.length;i++){lis[i].onmouseover=function(){clearInterval(timer); index=this.innerHTML-1;//必须减1,否则移入指到最后一张会报错//lis[i].index=i;  //lis[i]没有index的属性for(var j=0;j<lis.length;j++){      //初始化所有的li和div标签//imags[j].className="hide"; 图片需定义display,display只有none,blockimags[j].style.display="none";lis[j].className=""};//imags[this.index].className="";同上imags[index].style.display="block";lis[index].className="on";};};//五鼠标离开整个容器时继续播放至下一张list.onmouseout=function(){timer=setInterval(autoplay,1000);};//autoplay 函数定义function autoplay(){//index1++; 上面定义indexindex++;if(index>=lis.length){index=0;};for(var j=0;j<lis.length;j++){//imags[j].className="hide";//lis[j].className="";imags[j].style.display="none";lis[j].className="";}; console.log(index);//imags[index1].className="";imags[index].style.display="block";lis[index].className="on";};//总结 :// 1.容器移入移出没写 wrap.onmouseover & wrap.onmouseout}</script> </head><body><div class="wrap" id="wrap"><ul id="pic"><li><img src="http://img1.sycdn.imooc.com/54111cd9000174cd04900170.jpg" alt=""></li><li class="hide"><img src="http://img1.sycdn.imooc.com/54111dac000118af04900170.jpg" alt=""></li><li class="hide"><img src="http://img1.sycdn.imooc.com/54111d9c0001998204900170.jpg" alt=""></li><li class="hide"><img src="http://img1.sycdn.imooc.com/54111d8a0001f41704900170.jpg" alt=""></li></ul><ol id="list"><li class="on">1</li><li>2</li><li>3</li><li>4</li></ol></div></body></html>