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

<!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左右箭头切换(修改后)的更多相关文章

tab左右箭头切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...
QUartus 使用之001_空格_箭头切换----FPGA--001
Quartus里的Tab键,按下后,显示的为什么是箭头,以前显示的是空白,图片如下: 解决方式如下: 修改后效果图如下:
Eclipse Java class修改后的即时编译
通常情况下,修改了java文件,需要重启eclipse.但是myeclipse可以不用. 其实即时编译早就有了,通过简单配置javaRebel配置,可以达到修改java文件后不重启eclipse. 注 ...
ListView与.FindControl()方法的简单练习 #2 -- ItemUpdting事件中抓取「修改后」的值
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/24/listview_itemupdating_findcontrol_201 ...
TortoiseSVN服务器ip地址修改后如何使用
TortoiseSVN是很多人特别是程序员经常使用的工作追述工具,在长期使用过程中难免会遇到服务器迁移ip地址变更的问题.那么在服务器ip地址变化之后,我们要如何继续使用呢?步骤其实非常简单,下面我们 ...
在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法
迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法详情了解:http://topeetboard.com 更多了解:https://arm-board.taobao.com/ 用户在开发板上运 ...
【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章从简单的Tab标签到Tab图片切换的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...

随机推荐

Convert Object to XML using LINQ
Convert Object to XML using LINQ. Also the object contains other object list. Following is the Class ...
python最简单的http服务器
人生苦短,我用python 今天有个需求就是简单的把自己的图片通过web共享,自然就想起了使用服务器了,在python下使用一个简单的服务器是非常方便的,用到标准库里面的SimpleHTTPServe ...
【java基础】面向过程~面向对象
相信大家都知道这两个东西,可是大家是如何知道的呢?我们又该如何区分这个东西到底是面向过程还是面向对象的呢? 那,我们首先就要知道什么是面向过程,什么是面向对象: 面向过程"(Procedur ...
动态平衡二叉搜索树的简易实现，Treap 树
http://blog.csdn.net/qichi_bj/article/details/8232048
关于CDH中开发Spark
文章发自http://www.cnblogs.com/hark0623/p/4167363.html 转发请注明注意:基于CDH进行Spark开发时,使用高版本的apache原生包即可:不需要使用C ...
587A
#include<iostream> #include<algorithm> #include<stdio.h> #include<stdlib.h> ...
解决ScrollView嵌到listView冲突问题
方法一: 把下面的方法放在绑定适配器操作的下面就行. /** * 重新计算ListView的高度,解决ScrollView和ListView两个View都有滚动的效果,在嵌套使用时起冲突的问题 * @ ...
Linux使用du和df查看磁盘和文件夹占用空间
df df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. df -lh 参数 -h 表示使用「Human-readable」输出,也就是使用 GB.MB 等易读的格式. $ ...
windows安装python
1:首先去python网站下载安装包:https://www.python.org/downloads/,注意自己的系统版本 2:在自己指定目录安装即可: 3:将python路径加入PATH环境变量: ...
SpringMVC解析5-DispatcherServlet逻辑细节
MultipartContent类型的request处理对于请求的处理,spring首先考虑的是对于Multipart的处理,如果是MultipartContent类型的request,则转换req ...

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

tab左右箭头切换(修改后)的更多相关文章

随机推荐

热门专题