自动播放选项卡

最新推荐文章于 2024-09-07 13:38:28 发布

weixin_30268921

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guolimin/p/6067496.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box {
   width: 300px;
   height: 300px;
   border: black 1px solid;
   margin: 50px auto;
   font-family:"微软雅黑";
   position: relative;
}

#box span {
   display: block;
   width: 100px;
   height: 40px;
   line-height:40px;
   text-align:center;
   float: left;
   background: #ccc;
}

#box span:hover {
   cursor:pointer;
}

#box div {
   wdith: 300px;
   height: 260px;
   line-height:260px;
   text-align: center;
   font-size:50px;
   display: none;
}

#box .on {
   background: #c00;
   color: #fff;
}

#prev,
#next {
   position: absolute;
   top: 135px;
   width: 60px;
   height: 30px;
   display: block;
   background: green;
   color: #fff;
   text-align: center;
   line-height: 30px;
   text-decoration:none;
   font-size: 30px;
}

#prev {
   left: 0;
}

#next {
   right: 0;
}
</style>
<script>
window.onload = function(){
   var oBox = document.getElementById('box');
   var aBtn = oBox.getElementsByTagName('span');
   var aDiv = oBox.getElementsByTagName('div');
   var oNext = document.getElementById('next');
   var oPrev = document.getElementById('prev');
   var iNow = 0;
   var timer = null;
   //三个按钮
   for(var i = 0; i < aBtn.length; i++){
       aBtn[i].index = i;
       aBtn[i].onclick = function(){
           iNow = this.index;
           tab();
       }
   }

   function tab(){
       for(var i = 0; i < aBtn.length; i++){
           aBtn[i].className = '';
           aDiv[i].style.display = 'none';
       }
       aBtn[iNow].className = 'on';
       aDiv[iNow].style.display = 'block';
   }

   //下一个按钮
   oNext.onclick = next;
   function next(){
       iNow++;
       if(iNow == aBtn.length){
           iNow = 0;
       }
       tab();
   }
   //上一个按钮
   oPrev.onclick = prev;
   function prev(){
       iNow--;
       if(iNow == -1){
           iNow = aBtn.length - 1;
       }
       tab();
   }

   timer = setInterval(next,1000);

   oBox.onmouseover = function(){
       clearInterval(timer);
   }

   oBox.onmouseout = function(){
       timer = setInterval(next,1000);
   }

}
</script>
</head>

<body>
<div id="box">
   <a href="javascript:;" id="prev">←</a>
    <span class="on">按钮1</span>
    <span>按钮2</span>
    <span>按钮3</span>
   <a href="javascript:;" id="next">→</a>
    <div style="display: block;">div1</div>
    <div>div2</div>
    <div>div3</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/guolimin/p/6067496.html

weixin_30268921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动播放选项卡

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#box { width: 300px; height: 300px; border: black 1px solid; margin: 5...
复制链接

扫一扫