87,899
社区成员
发帖
与我相关
我的任务
分享
<!Doctype Html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="expires" content="Thursday 10 December 2020 00:00 GMT" />
<meta name="keywords" content="" >
<meta name="description" content="" >
<title>test html</title>
<style>
* { padding: 0; margin: 0;}
ul,li { list-style: none;}
#demoWrap { width: 770px; height: 391px; border: 1px solid #eee; margin: 100px auto;}
#demoHeader { height: 50px; background: #e0edff; border-bottom: 1px solid #acb8c8;}
#demoHeader .demoTab1 { height: 46px; padding-top: 4px;}
#demoHeader .demoTab1 li { width: 90px; height: 45px; font: 16px/45px Arial, Helvetica, sans-serif; text-align: center; margin-left: 8px; float: left; -webkit-border-top-left-radius: 7px; -moz-border-top-left-radius: 7px; border-top-left-radius: 7px; border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-top-right-radius: 7px; border-top-right-radius: 7px; border-top-right-radius: 7px; border: 1px solid #acb8c8;}
#demoHeader .demoTab1 li.actived { background: #fff; border-bottom-color: #fff;}
#demoCon { height: 340px;}
#demoCon .demoTab2 { width: 770px; height: 340px;}
#demoCon .demoTab2 li { -moz-opacity: 0; -webkit-opacity: 0; opacity: 0; z-index: -1; width: 770px; height: 340px; position: absolute; transition: opacity 300ms; -moz-transition: opacity 300ms; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms;}
#demoCon .demoTab2 li.actived { -moz-opacity: 1; -webkit-opacity: 1; opacity: 1; z-index: 1;}
</style>
</head>
<body>
<div id="demoWrap">
<div id="demoHeader">
<ul class="demoTab1">
<li>Shirt1</li>
<li>Shirt2</li>
<li>Shirt3</li>
<li>Shirt4</li>
<li>Shirt5</li>
</ul>
</div>
<div id="demoCon">
<ul class="demoTab2">
<li>
<br>
11111111111111111111111111111
</li>
<li>
<br>
22222222222222222222222222222
</li>
<li>
<br>
33333333333333333333333333333
</li>
<li>
<br>
44444444444444444444444444444
</li>
<li>
<br>
55555555555555555555555555555
</li>
</ul>
</div>
</div>
<script type="text/javascript" language="javascript">
var tab1=document.getElementsByClassName('demoTab1')[0].children;
var tab2=document.getElementsByClassName('demoTab2')[0].children;
var num=1;
function tab1Turn(){
if(num==tab1.length){num=0}
for(i=0;i<tab1.length;i++){
tab1[i].setAttribute('class','');
tab2[i].setAttribute('class','')
}
tab1[num].setAttribute('class','actived');
tab2[num].setAttribute('class','actived');
num++;
}
tab1[0].setAttribute('class','actived');
tab2[0].setAttribute('class','actived');
var myturn=setInterval(tab1Turn,4000);
for(j=0;j<tab1.length;j++){
tab1[j].onmouseover = tab2[j].onmouseover = (function(x){
return function(){
clearInterval(myturn);
num=x;
tab1Turn();
}
})(j)
tab1[j].onmouseout = tab2[j].onmouseout = function(){
myturn=setInterval(tab1Turn,4000);
}
}
</script>
</body>
</html>