您的位置：首页 > 其它

一个双层选项卡自动切换的小练习

2016-12-16 00:00 162 查看

<!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=utf-8" />
<title>自动轮换选项卡</title>
<style>

*{margin:0; padding:0; font-size:12px; font-family:"宋体";}
li{list-style:none;}
a{text-decoration:none;}
img{vertical-align:top;}
body{background:#333;}
#box{width:394px; height:256px; margin:80px auto 0; position:relative;}
#box a{width:100%; height:100%; color:#FFF; text-align:center; line-height:35px;}
input{width:90px; height:35px; background:#06F; color:#FFF; text-align:center; line-height:35px; border:none;}
.a1, .a2{position:absolute; top:0;}
.a1{left:0;}
.a2{left:91px;}
#box img{position:absolute; left:0; top:36px; height:215px;}
#box ul{position:absolute; right:0; top:36px;}
#box li{width:100px; height:35px; margin-bottom:1px; background:#06F; color:#FFF; text-align:center; line-height:35px;}

</style>

<script type="text/javascript" src="js/zdlh.js"></script>
</head>

<body>
<div id="box">
<input class="a1" value="选项卡一" style="background:red"/>
<input class="a2"value="选项卡二" />
<img src="images/1.jpg" />
<ul style="z-index:2">
<li style="background:red"><a href="">图片一</a></li>
<li><a href="">图片二</a></li>
<li><a href="">图片三</a></li>
<li><a href="">图片四</a></li>
<li><a href="">图片五</a></li>
<li><a href="">图片六</a></li>
</ul>
<ul>
<li><a href="">图片四</a></li>
<li><a href="">图片五</a></li>
<li><a href="">图片六</a></li>
<li><a href="">图片七</a></li>
<li><a href="">图片八</a></li>
<li><a href="">图片九</a></li>
</ul>
</div>
<script>
var oBox=document.getElementById("box"); var oInp=oBox.getElementsByTagName('input'); var oUl=oBox.getElementsByTagName('ul'); var oLi=oBox.getElementsByTagName('li'); var oImg=oBox.getElementsByTagName('img')[0]; var num=0; var arrImg=[ "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg" ]; function autoPlay(){ // 1、函数执行时

for(var i=0;i<oLi.length;i++){ // 2、清空li的样式
oLi[i].style.background="#06F" } for(var j=0;j<oInp.length;j++){ // 3、清空input的样式
oInp[j].style.background="#06F"; oUl[j].style.zIndex=1; // 4、让ul隐藏
} if(num==oLi.length){ // 5、当li切换到最后是又从零开始切换
num=0 } oImg.src=arrImg[num] // 6、切换图片的src

if(num<oLi.length/2){ // 7、 当前的li小于图片个数的一半时
oUl[0].style.zIndex=2; // 让第一个ul显示
oInp[0].style.background="red"      // 让第一个input显示红色
oLi[num].style.background="red"; // 让当前的li显示红色
num++; // 让索引自加
}else{ // 8、 当前的li大于图片个数的一半时
oUl[1].style.zIndex=2; // 让第二个ul显示
oInp[1].style.background="red"      // 让第二个input显示红色
oLi[num].style.background="red"; // 让当前的li显示红色
num++; // 让索引自加
} } timer=setInterval(autoPlay,1000) //定时器
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航