您的位置：首页 > Web前端 > JavaScript

javascript学习教程之---如何从一个tab切换到banner幻灯片的转换2

2013-10-28 11:24 411 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab定时切换</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<style>
#nav_list{ height:25px; width:300px; background:#999;}
#nav_list div{ float:left; width:100px; line-height:25px; text-align:center;}
#nav_list div.cur{ background:#C60; color:#fff;}

#nav_con{ width:298px; border:1px solid #999; height:100px;}
#nav_con div{ display:none;}
</style>
<div id="nav_list">
<div class="cur">tab1</div>
<div>tab2</div>
<div>tab3</div>
</div>
<div id="nav_con">
<div style="display:block;">tab1tab1tab1tab1tab1tab1tab1</div>
<div>tab2tab2tab2tab2tab2tab2tab2</div>
<div>tab3tab3tab3tab3tab3tab3tab3</div>
</div>

<script type="text/javascript">
var time;//定义定时器
var i=-1;//定义开始显示的内容，由于下面执行了i++;所以只能给i赋值-1
var offset=2000;//设置相隔2秒就切换
var index_n=$('#nav_list>div').length;//获取切换个数
var nav_top=$('#nav_list>div');
var nav_con=$('#nav_list + div>div'); //可以写成var nav_con=$('#nav_con>div')

function roll(){
i++;
if(i>index_n){//如果i>切换个数后，重新给i赋值=0
i=0
}
slide(i);
time=setTimeout(roll,offset);//设置定时器
}
function slide(i){
nav_top.eq(i).addClass('cur').siblings().removeClass('cur');//把当前的div的高亮
nav_con.eq(i).show().siblings().hide();
}

roll();//执行函数

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航