Tab选项卡切换效果_技术问答

首页免费课 Tab选项卡切换效果问答

Tab选项卡切换效果

                
                Amy
            
                    查看讲师更多课程 
                    Amy讲师的其他课程
                
CSS3实现漂亮ToolTips效果
初级·42722
免费课程
                                
css3实现网页平滑过渡效果
初级·54370
免费课程
                                
CSS3实现“图片阴影”效果
初级·34770
免费课程
                                
DOM事件探秘
中级·99546
免费课程
                                
瀑布流布局
初级·97755
免费课程
                                
                难度初级
            
                时长 1小时34分
            
                学习人数
            
综合评分9.73
                            233人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.8
                                简洁易懂
                            
                                9.5
                                逻辑清晰

全部评论问答未解决精华

Apple818Love

// 鼠标划过整个容器时停止自动播放
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
clearInterval(timer);

}
// 鼠标离开整个容器时继续播放至下一张
lis[i].onmouseout = function(){
timer = setInterval(changeOption,1000);
}
}

0 4-1 焦点轮播图效果

2017-04-05

Apple818Love

timer = setInterval(changeOption,1000);
// 定义图片切换函数
function changeOption(){
list[index].className ="";
index++;
if(index>=lis.length){
index = 0;
}
pic.style.top = -170*index+"px";
list[index].className ="on";
}

0 4-1 焦点轮播图效果

2017-04-05

Apple818Love

超级棒的
timer = setInterval(function(){
list[index].className ="";
index++;
if(index>=lis.length){
index = 0;
}
pic.style.top = -170*index+"px";
list[index].className ="on";
},1000);

0 4-1 焦点轮播图效果

2017-04-05

Apple818Love

timer = setInterval(function(){
index++;
if(index>=lis.length){
index = 0;
}
pic.style.top = -170*index+"px";
},1000);

0 4-1 焦点轮播图效果

2017-04-05

Harlean

声音好听。

1 1-1 课程简介

2017-04-01

慕用5056317

好多的啊。。嗯。。啊。。。。

1 1-3 tab页面布局-内容布局

2017-03-29

慕前端7327134

学了半年感觉选项卡还不会，我也是醉了，还天天学nodejs

2 1-4 js实现切换效果

2017-03-29

q97056

timer=setInterval(function(){
send.disabled=true;
send.setAttribute('value',times+'秒后重试');

0 3-4 编程练习

2017-03-29

夜尽天明4039292

第二个我说错了有bug 哎装逼遭雷劈

1 1-4 js实现切换效果

2017-03-16

夜尽天明4039292

。。。。。。

0 2-1 js实现延迟切换

2017-03-16

夜尽天明4039292

老师有两个地方可以优化一个是宽度可以用20%（标题列）、50%（内容列）来写免去计算的麻烦，也有助于后期维护；第二 js老师用一个鼠标事件onmouseover实现链接高亮显示、可以用两个鼠标事件onmouseover、onmouseup程序代替ian，避免二次遍历减少程序复杂度

0 1-4 js实现切换效果

2017-03-16

浅尝

老师666 阿阿阿涛吖也666

0 3-3 bug解决及定时器优化

2017-03-15

C_黑鸡

参考的代码使用 margintop 的负数来实现显示不同图片原来我是懂……
但是有没像之前那样通过 display 来实现？
例如index为2的时候，显示的是index为2的img标签内容。

0 4-1 焦点轮播图效果

2017-03-15

浅尝

好开心啊，做出来

0 2-1 js实现延迟切换

2017-03-14

浅尝

哦，是我错了

0 1-4 js实现切换效果

2017-03-12

首页上一页 9 10 11 12 13 14 15 下一页尾页

开始学习

课程须知: 1、您应该已经熟悉html标签和css样式表；2、您还应该已经熟悉JavaScript 或 jQuery的基础知识。

老师告诉你能学到什么？: 您可以举一反三，制作非常精美风格多样的 Tab 切换效果，能够帮助你丰富或改进网站中的选项卡功能的用户体验。

微信扫码，参与3人拼团

热搜

最近搜索清空

Tab选项卡切换效果