- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E ;
- <html xmlns="http://www.w3.org/1999/xhtml"> http://www.w3.org/1999/xhtml%22%3E ;
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Tab 选项卡 </title>
- <style>
- {margin:0;padding:0;font-size:12px;}
- .notice{width:600px;margin:10px;height:400px;overflow:hidden;border:1px solid #eee;}
- /.notice img{width: 100%;height: 100%}*/
- .notice .notice-tit{height:27px;position:relative;background:#f7f7f7;}
- .notice-tit ul{width:100px;position:absolute;height:27px;left:50%;margin-left: -50px}
- .notice-tit li{list-style:none;float:left;width:10px;height:10px;margin:0 5px; border-radius: 50%;-webkit-border-radius:50%; overflow:hidden;background:#e7e7e7;}
- .notice-tit li.select{background:#f00;}
- .notice li a:link,.notice li a:visited{text-decoration:none;color:#000;}
- .notice-tit li a:hover{color:#f90;}
- .notice-con{position: relative;}
- .notice .mod{position: absolute; width: 600px;height: 400px;transition:.5s all;-webkit-transition:.5s all;}
- </style>
- <script>
- window.onload = tab;
- function tab(){
- var index = 0,// 当前高亮的索引
- timer = null,
- lis = $('notice-tit').getElementsByTagName('li'),
- divs = $('notice-con').getElementsByTagName('div');
- divs[index].style.opacity = '1';// 当前高亮的内容显示
- if(lis.length != divs.length) return;
- for(var i=0; i<lis.length; i++){
- lis[i].id = i;
- lis[i].onmouseover = function(){
- clearInterval(timer);
- changeOption(this.id);
- }
- lis[i].onmouseout = function(){
- timer = setInterval(autoPlay,2000);
- }
- }
- if(timer){
- clearInterval(timer);
- timer=null;
- }
- // 添加定时器, 改变当前高亮的索引
- timer = setInterval(autoPlay,2000);
- function autoPlay(){
- index++;
- if(index>= lis.length){
- index = 0;
- }
- changeOption(index);
- }
来源: http://www.qdfuns.com/article/18286/63a70f82d76a9616403abf1c1b199afb.html