码迷，mamicode.com
首页 > 其他好文 > 详细

tab左右箭头切换(修改后)

时间：2016-08-03 18:26:24      阅读：211      评论：0      收藏：0      [点我收藏+]

标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0037)http://www.shzhixun.net/platform.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
body{ margin:0px; padding:0px; min-width: 1210px; color:#6f6f6f; font-family:"微软雅黑", "宋体", Arial, "Times New Roman", sans-serif;}
.bai{ background:#FFF; margin:0px; padding:0px;}
a{ text-decoration:none; color:#393939;}
a:hover{ text-decoration: none; color:#f39800;}
/*html {overflow-y:scroll;overflow-x:hidden;overflow:-moz-scrollbars-vertical}*/
/*删除火狐下按钮默认样式*/
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
 border:none;
padding:0px;
margin:0px;
}
/*浮动*/
.clearboth { clear:both;}
.float_l { float:left; display:inline;}
.float_r { float:right; display:inline;}
img {vertical-align:middle;}
ul, li { list-style:none; margin:0; padding:0;}
form, div, body, img, p, a, img, dl, dd, dt, table, tr, td, th,input { margin:0px; padding:0px; border:0;}




    .pingtai_con{ width:870px; min-height:350px; margin:0px auto; margin-top:15px; margin-bottom:30px;}
    .mod18{width:870px;min-height:350px;margin:10px auto;position:relative;background:#fff; border: 1px solid #ccc}
    .mod18 .btn{position:absolute;width:45px;height:45px;top:15px;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
    .mod18 .prev{left:0px;top:15px;background: url(images/prevBtn.jpg) no-repeat}
    .mod18 #prevTop,.mod18 #nextTop{top:400px;width:46px;height:48px; display:none}
    .mod18 #prevTop{/*background:url(images/prevBtnTop.png) 0 0 no-repeat;*/ background:#060;display:none}
    .mod18 #nextTop{/*background:url(images/nextBtnTop.png) 0 0 no-repeat;*/background:#060;display:none}
    .mod18 .next{right:0px;top:15px;background:url(images/nextBtn.jpg) no-repeat;}
    .mod18 li{float:left;}
    .mod18 .cf li{position:relative;color:#333;}
    .mod18 .cf a{display:block;width:680px;height:330px;position:absolute;color:#333;}
    .mod18 .cf li span{display:block;width:640px;position:absolute;left:0;bottom:0;padding:10px 20px;line-height:22px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
    .mod18 .picBox{min-height:720px;position:relative;overflow:hidden;border-top:1px solid #ccc }
    .mod18 .picBox ul{position:absolute;}
    .mod18 .picBox li{width:870px;min-height:330px; background: url(‘images/dian3.jpg‘) 139px 0 repeat-y; margin: 10px 0 20px 0;}
    .mod18 .listBox{height:75px;position:relative;overflow:hidden; margin: 0 90px}
    .mod18 .listBox ul{height:75px;position:absolute; left:0px;width: 10000px;}
    .mod18 .listBox li{width:45px;height:45px;cursor:pointer;position:relative;text-align:center;line-height:45px;font-size:14px;font-family:"微软雅黑";background:#afbdc8;color:#fff; margin:15px 45px 15px 0; border-radius: 45px}
        
    .mod18 .listBox li i{display:none;}
    .mod18 .listBox li a{display:block;width:45px;height:45px;}
    .mod18 .listBox li img{width:124px;height:70px;}
    .mod18 .listBox .on {width:45px;height:45px;color:#fff;background:#fac046 ;}
    .mod18 .listBox .on i{display:block;}     
    .mod18 .picBox  li h3{ text-indent:75px; line-height: 1px }
    .mod18 .picBox  li div{ background: url(‘images/time_line.png‘) 131px  1px no-repeat; position: relative; }
    .mod18 .picBox  li div em{ position: absolute; left: 50px; font-style: normal; }
    .mod18 .picBox  li h4{ text-indent:165px; color: #323232; font-weight:  normal; }
    .mod18 .picBox  li div p {width:680px;margin-left: 170px;display: inline-block;padding-left: 10px; color: #9ea7b3; line-height: 20px; font-size: 14px}
    
</style>
</head>
<body>
<div class="pingtai_con">
  <div class="mod18"> <span id="prev" class="btn prev"></span> <span id="next" class="btn next"></span> <span id="prevTop" class="btn prev"></span> <span id="nextTop" class="btn next"></span>
    <div id="listBox" class="listBox" >
      <ul  style="width: 13604px;" class="cf">
        <li class="on"><i class="arr2"></i>2016</li>
        <li class=""><i class="arr2"></i>2017</li>
        <li class=""><i class="arr2"></i>2018</li>
        <li class=""><i class="arr2"></i>2019</li>
        <li class=""><i class="arr2"></i>2020</li>
        <li class=""><i class="arr2"></i>2021</li>
        <li class=""><i class="arr2"></i>2022</li>
        <li class=""><i class="arr2"></i>2023</li>
        <li class=""><i class="arr2"></i>2024</li>
        <li class=""><i class="arr2"></i>2025</li>
        <li class=""><i class="arr2"></i>2026</li>
        <li class=""><i class="arr2"></i>2027</li>
        <li class=""><i class="arr2"></i>2028</li>
        <li class=""><i class="arr2"></i>2029</li>
      </ul>
    </div>
    <div id="picBox" class="picBox">
      <ul  style="width: 16940px;" class="cf" >
        <li>
        <h3>1月</h3>
        <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <h3>2月</h3>
        <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
        </li>
         <li>
        <h3>1月</h3>
        <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <h3>2月</h3>
        <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
        </li>
        <li>
        <h3>1月</h3>
        <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <h3>2月</h3>
        <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
        </li>
         <li>
        <h3>1月</h3>
        <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>1月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <h3>2月</h3>
        <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
         <div>
         <em>2月19日</em>
         <h4>上海第六人民医院</h4>
         <p>肝功能八项</p>
         <p>肝功能八项</p>
         <p>肝功能八项</p>        
        </div>
        </li>
        <li>
          <p>11111111111</p>
        </li>
        <li>
          <p>111111</p>
        </li>
        <li>
          <p>22222222222222</p>
        </li>
        <li>
          <p>5555555555</p>
        </li>
        <li>
          <p>66666666666</p>
        </li>
        <li>
          <p>777777777777</p>
        </li>
        <li>
          <p>9999999999999</p>
        </li>
        <li>
          <p>3333333333333</p>
        </li>
        <li>
          <p>44444444444444444444</p>
        </li>
        <li>
          <p>5555555555555555555</p>
        </li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
(function(){
    
    function G(s){
        return document.getElementById(s);
    }
    
    function getStyle(obj, attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj, false)[attr];
        }
    }
    
    function Animate(obj, json){
        if(obj.timer){
            clearInterval(obj.timer);
        }
        obj.timer = setInterval(function(){
            for(var attr in json){
                var iCur = parseInt(getStyle(obj, attr));
                iCur = iCur ? iCur : 0;
                var iSpeed = (json[attr] - iCur) / 5;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                obj.style[attr] = iCur + iSpeed + ‘px‘;
                if(iCur == json[attr]){
                    clearInterval(obj.timer);
                }
            }
        }, 30);
    }

    var oPic = G("picBox");
    var oList = G("listBox");
    
    var oPrev = G("prev");
    var oNext = G("next");
    var oPrevTop = G("prevTop");
    var oNextTop = G("nextTop");

    var oPicLi = oPic.getElementsByTagName("li");
    var oListLi = oList.getElementsByTagName("li");
    var len1 = oPicLi.length;
    var len2 = oListLi.length;
    
    var oPicUl = oPic.getElementsByTagName("ul")[0];
    var oListUl = oList.getElementsByTagName("ul")[0];
    var w1 = oPicLi[0].offsetWidth;
    var w2 = oListLi[0].offsetWidth;

    oPicUl.style.width = w1 * len1 + "px";
    //oListUl.style.width = w2 * len2 + "px";
    oListUl.style.width = "1750px;";

    var index = 0;
    
    var num = 5;
    var num2 = Math.ceil(num / 2);

    function Change(){

        Animate(oPicUl, {left: - index * w1});
        
        if(index < num2){
            Animate(oListUl, {left: 0});
        }else if(index + num2 <= len2){
            Animate(oListUl, {left: - (index - num2 + 1)* 2 * w2});
        }else{
            Animate(oListUl, {left: - (len2 - num)* 2 * w2});
        }

        for (var i = 0; i < len2; i++) {
            oListLi[i].className = "";
            if(i == index){
                oListLi[i].className = "on";
            }
        }
    }
    
    oNextTop.onclick = oNext.onclick = function(){
        index ++;
        index = index == len2 ? 0 : index;
        Change();
    }

    oPrevTop.onclick = oPrev.onclick = function(){
        index --;
        index = index == -1 ? len2 -1 : index;
        Change();
    }

    for (var i = 0; i < len2; i++) {
        oListLi[i].index = i;
        oListLi[i].onclick = function(){
            index = this.index;
            Change();
        }
    }
    
})()
</script> 
  
  
</div>
</body>
</html>

 

tab左右箭头切换(修改后)

标签：

原文地址：http://www.cnblogs.com/Xuman0927/p/5733864.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！