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标签部分. ...

随机推荐

supervisor(二)event
supervisor的event机制其实,就是一个监控/通知的框架.抛开这个机制实现的过程来说的话,event其实就是一串数据,这串数据里面有head和body两部分.咱们先弄清楚event数据结构, ...
深入剖析Java中的装箱和拆箱
深入剖析Java中的装箱和拆箱自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若干问题.本文先讲述装箱和拆箱最基本的东西,再来看一下面试笔试中经常遇到的与装箱 ...
SlidesJS的使用
项目中对slideshow要求要有触屏滑动换图功能,就想到了SlidesJS这个Jquery插件例排,先把静态html写好 <div id="cm_slides"> ...
VMware 锐捷 NAT模式的服务自动关闭的解决办法
之前一直搞不定VMware和锐捷的问题,校园网,你懂的. 后来发现,使用NAT模式联网时,锐捷会间隔性地终结windows系统的那个关于NAT联网的服务,你可以在计算机管理 - 服务,找到一个写有NA ...
[R语言]foreach和doParallel包实现多个数据库同时查询
R语言在进行数据库查询时,每执行一条语句,都会阻塞.直到查询语句返回结果之后,才会进行下一条语句. 为了能够实现同时对多个数据库进行查询,以节省顺序执行下来的时间,首先考虑通过多线程来进行数据库查询. ...
flexbox布局的兼容性
http://ayqy.net/blog/flexbox布局的兼容性/ 写在前面 flex布局早在2009年就有了,而现在是2015年6月8日,使用最新的flex语法会发现支持程度并不好,即使是在“高 ...
HDU 3072 (强连通分量)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3072 题目大意:为一个有向连通图加边.使得整个图全连通,有重边出现. 解题思路: 先用Tarjan把 ...
POJ 3276 (开关问题)
题目链接: http://poj.org/problem?id=3276 题目大意:有一些牛,头要么朝前要么朝后,现在要求确定一个连续反转牛头的区间K,使得所有牛都朝前,且反转次数m尽可能小. 解题思 ...
viewpager 与 radiogroup 联动时的位置问题
public void onPageSelected(int position) {} 方法中得到radiobutton时,最好通过(RadioButton) this.radioGroup.find ...
Android开发之详解五大布局
http://bbs.chinaunix.net/thread-3654213-1-1.html 为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是: LinearLayo ...

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

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

随机推荐

热门专题