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

最新推荐文章于 2022-10-09 10:10:27 发布
最新推荐文章于 2022-10-09 10:10:27 发布
阅读量856 收藏
点赞数
文章标签： 开发工具 c# xhtml
原文链接：http://www.cnblogs.com/Xuman0927/p/5733864.html
版权 
<!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>

 

转载于:https://www.cnblogs.com/Xuman0927/p/5733864.html

diao1981
关注
vue列表左右箭头滑动 vue+typescript实现左右箭头翻页，类似轮播图效果
weixin_45803033的博客
06-05 3354
今天的内容是在工作终于到的问题，先上图吧： 这个是iview-design官网的tabs切换里面的内容，红色圈住的部分就是今天的内容，左右箭头可以切换，内容可以自定义。 html代码： <div class="content-item"> <!-- 左箭头 --> <a href="javascript:;" v-if="qulityList.length>4" class="prev" @click="translateLeft"&
基于antd，实现有左右箭头的Tabs
Rabbit_yo的博客
10-11 3099
效果如图 添加Tabs的id，防止一页多个Tabs const tabsDivId = useRef(Math.random()); <Tabs id={tabsDivId.current}> {children} </Tabs> 当 Tabs 的标签页总长度超过可现实区域长度，出现左右箭头，否则不显示 const [navHeight,setNavHeight] = useState(0); useEffect(() => { const tabLis
js控制div左右切换带左右箭头
11-05
js控制div左右切换带左右箭头
带有左右箭头切换的Tab页签
weixin_30449453的博客
03-31 1953
步骤： 1.首先布局样式，要有一个容器存放ul，还有两个左右切换Tab页签的按钮； 2.当ul的宽度超出div时，ul下的li要不换行; 3.给切换Tab页签的按钮添加方法：当点击向左切换Tab页签的时候，以左边的页签为标准，当点击向右切换Tab页签的时候，以右边的页签为标准； 具体内容如下： 1.首先布局样式，要有一个容器存放ul，还有两个左右切换Tab页签的按钮； //div是左按...
jquery左右滚动切换带左右箭头
11-15
很好的效果，带左右键头，带详细信息，可以满意您的要求。
列表左右箭头滑动_关于游戏中左右箭头切换刷新内容的组件
weixin_42350755的博客
01-13 471
很多游戏中会有这种操作: 通过点击左右箭头,刷新列表中的展示内容。类似下面:左右箭头的显/隐 在不同的情况下，可能逻辑也不太一样，比如，循环模式，则左右箭头都显示边界模式，也就是如果currentIndex刚好是0，那么左边箭头不显示，如果currentIndex刚好是Count - 1，那么右边箭头不显示其他模式......其实这是一个很好实现的功能，给左右箭头按钮各自注册点击事件，然后在事件中...
javascript tab 左右移动
weixin_30477293的博客
07-22 146
View Code <script language="javascript"> var speed=10;var step=10;var timer;function leftAdd(){ timer=setInterval(function(){solutionTabs.scrollLeft+=step;},speed);}function leftReduce(){...
jQuery实现的带左右箭头的Tab菜单源码.zip
11-18
这个源码利用jQuery的事件处理和DOM操作功能，实现了可滚动的Tab菜单，用户可以通过点击左右箭头来切换不同的Tab选项。 在网页设计中，Tab菜单是一种常见的布局方式，它可以有效地组织和展示大量信息，提高用户体验...
jquery多图tab标签切换焦点图
06-09
每个tab对应一张图片，当用户点击某个tab时，对应的图片会在容器中显示，同时可能伴随着一些动画效果，如淡入淡出、左右滑动等。在修正之前的冗余代码后，现在的实现更加精简，更利于开发者进行二次修改和扩展。 ...
带轮换样式的Tab页签导航
01-31
带轮换样式的Tab页签导航
jquery 特效，实现可左右移动的tab效果
03-16
也是在网上找的，做项目中用到了。感觉还不错，拿来和大家分享。
JavaScript实现的带左右箭头的tab标签代码，tab里面可以放html代码，不限于文字
05-18
JavaScript实现的带左右箭头的tab标签代码，tab里面可以放html代码，不限于文字
html tab选项卡实现
01-14
html 及 css 实现的tab选项卡。十分简洁。
简洁实用的左右滑块插件(支持点状、左右切换按
06-11
左右图片切换效果，支持点状以及箭头切换，代码非常简洁易用，只需依次调用html代码以及jquery库、jquery插件即可实现 不仅支持单张图片切换，也支持多张图片同时左右切换 兼容性良好，兼容IE 6  7   8等主流浏览器
怎么在数据窗口中用左箭头实现shift+tab
yishanhai的专栏
11-13 917
  问：各位大侠：我想在PB中获得一个象foxpro那样的编辑环境，即按左箭头光标便移动到当前列的左边一列，按右箭头光标便移动到右边一列，请问有什么办法？特急！！！ 答：声明函数：subroutine keybd_event(uint bVk,uint bScan,long dwFlags,long dwExtraInfo ) library user32.dll  定
原生js实现带左右箭头可滑动的tab效果
yolo_link的博客
10-09 2565
方便控制左右按钮的禁用状态设置，我采用button组件的图标按钮。可视区域为黄色框①，包含可视tab蓝色框②以及左右箭头红色框；绿色框③就是所有的tab了，②和③的关系就是卡槽和卡带的关系。控制菜单tab左右箭头的显隐。
记录一个左右移动的tab的例子，很简单的一个例子(主要是想复用)
陈先生的博客
08-23 228
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {
jquery实现同时展示多个tab标签+左右箭头实现来回滚动
weixin_30415801的博客
11-09 1323
内容： jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果： 蓝色框圈起来的分别是向上翻、向下翻俩按钮。绿色框分别是用户点击菜单后，出现相应的tab标签，当tab标签太多内容显示不下时，左右两边的按钮就可以实现看后面的tab标签和看之前的tab标签。小颖一开...
前台tab左右箭头移动界面
weixin_44630850的博客
03-21 1186
前台tab左右箭头移动界面 Tab - Layui <div class="layui-body"> <!-- 内容主体区域 --> <div class="layadmin-pagetabs" style="position: relative;margin: 0px;paddin...
jQuery左右箭头Tab菜单实现源码下载
资源摘要信息: "jQuery实现的带左右箭头的Tab菜单源码" 知识点： 1. jQuery基础：jQuery是一个快速、小巧、功能强大的JavaScript库。它通过减少HTML文档遍历、事件处理、动画和Ajax交互的代码量，简化了JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值