zoukankan
html css js c++ java
淘宝首页自动切换选项卡变换内容
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
>
无标题文档
</
title
>
</
head
>
<
style
type
="text/css"
>
body
{
}
{
margin
:
0
;
padding
:
0
;
border
:
0
;
font-size
:
12px
}
div,ul,li
{
}
{
margin
:
0
;
padding
:
0
;
border
:
0
}
li
{
}
{
list-style
:
none
}
.m
{
}
{
margin
:
20px
;
width
:
338px
}
#rolinTab
{
}
{
float
:
left
;
border-top
:
1px solid #ccc
}
#rolinTab li
{
}
{
margin-top
:
-1px
;
width
:
35px
;
border
:
1px solid #ccc
;
margin-bottom
:
5px
;
line-height
:
22px
;
text-align
:
center
;
border-right
:
none
;
cursor
:
pointer
}
#rolinData
{
}
{
float
:
right
;
width
:
280px
;
border
:
1px solid #ccc
;
height
:
130px
;
margin-left
:
-1px
;
padding
:
10px
}
</
style
>
<
script
type
="text/javascript"
>
var
$
=
function
($)
{
return
document.getElementById($)}
function
getFirstChild(obj)
{
var
result
=
obj.firstChild;
while
(
!
result.tagName)
{
result
=
result.nextSibling;
}
return
result;
}
function
getNextChild(obj)
{
var
result
=
obj.nextSibling;
while
(
!
result.tagName)
{
result
=
result.nextSibling;
}
return
result;
}
function
rolinTab(tab,data,index)
{
var
tabList
=
$(tab).getElementsByTagName(
"
LI
"
);
var
selectItem
=
index
?
index
-
1
:
0
;
var
interval;
var
dataList
=
new
Array();
var
tmp
=
null
;
for
(
var
i
=
0
; i
<
tabList.length; i
++
)
{
tmp
=
i
==
0
?
getFirstChild($(data)):getNextChild(tmp);
dataList.push(tmp);
tabList[i].i
=
i;
tabList[i].onclick
=
function
()
{
if
(selectItem
!=
this
.i)
{
var
oldItem
=
selectItem
selectItem
=
this
.i;
changeItem(oldItem);
}
}
if
(i
!=
selectItem) dataList[i].style.display
=
"
none
"
;
}
$(tab).parentNode.onmouseover
=
function
()
{
clearInterval(interval);
}
$(tab).parentNode.onmouseout
=
function
()
{
interval
=
setInterval(change,
1000
)
}
changeItem();
interval
=
setInterval(change,
1000
)
function
change()
{
var
oldItem
=
selectItem
selectItem
++
;
if
(selectItem
>
tabList.length
-
1
) selectItem
=
0
;
changeItem(oldItem);
}
function
changeItem(old)
{
if
(old
!=
null
)
{
tabList[old].style.borderRight
=
"
none
"
;
tabList[old].style.cursor
=
"
pointer
"
;
tabList[old].style.color
=
"
#000
"
;
dataList[old].style.display
=
"
none
"
;
}
tabList[selectItem].style.borderRight
=
"
1px solid #fff
"
;
tabList[selectItem].style.cursor
=
"
nomorl
"
;
tabList[selectItem].style.color
=
"
#f60
"
;
dataList[selectItem].style.display
=
"
block
"
;
}
}
window.onload
=
function
()
{
rolinTab(
"
rolinTab
"
,
"
rolinData
"
,
1
)
}
</
script
>
<
body
>
<
div
class
="m"
>
<
div
id
="rolinData"
>
<
div
>
美女
</
div
>
<
div
>
美男
</
div
>
<
div
>
美狗
</
div
>
<
div
>
美猫
</
div
>
<
div
>
美猪
</
div
>
</
div
>
<
ul
id
="rolinTab"
>
<
li
>
美女
</
li
>
<
li
>
美男
</
li
>
<
li
>
美狗
</
li
>
<
li
>
美猫
</
li
>
<
li
>
美猪
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
查看全文
相关阅读:
深入浅出理解Javascript原型概念以及继承机制(转)
表达式计算器的实现
C#中使用Oracle存储过程返回结果集
基于.Net的单点登录(SSO)解决方案
让Windows Server 2008 + IIS 7+ ASP.NET 支持10万并发请求
项目经理应该把30%的时间用在编程上(转)
我是如何打败拖延症的(转)
我不是个内向的程序员,我只是很忙(转)
这个项目要多久开发完成?(转)
从零开始编写自己的C#框架(3)——开发规范(转)
原文地址:https://www.cnblogs.com/CB/p/1114230.html
最新文章
canvas ---个性时钟
原生--简易无缝选项卡
原生js 实现购物车价格和总价 统计
原生+jquery 实现好看滚动条。
自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js
重力感应的自制时钟
3d旋转
Oracle 查看锁定对象 解锁
Redhat linux 安装SVN服务器 CollabNetSubversionEdge
PLSQL连接Oracle数据库
热门文章
Android App程序结构
Android 系统架构
Mysql Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column
Android版本对应的API号
CentOS6.5 安装中文输入法
Unable to execute dex: Multiple dex files define 问题
区分Activity的四种加载模式【转载】
Google 全球 IP 地址库
Windows平台分布式架构实践
Windows平台分布式架构实践
Copyright © 2011-2022 走看看