切换选项卡,左右滚动

y_lin_sheng
y_lin_sheng 发布于 2017-03-13 16:47:41 浏览:2306 类型:转载 - 随笔 分类:HTML/CSS - 待整理 二维码: 转载说明
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .win{
            
            width:700px;height:300px;border:1px solid #ccc;margin:20px auto;position:relative;
            overflow: hidden;
        }
        .title{
            width:100%;height:30px;background:#eee;position: relative;
        }
        .title a{
            /*padding:0 30px;*/width:20%;height:100%;float:left;text-align: center;line-height: 30px;font-size: 15px;color:#009797;text-decoration: none;position: relative;z-index: 1;
        }
        .title .float{
            width:20%;height:100%;background: #009797;position: absolute;
        }
        .box{
            width:100%;height:270px;position: relative;
        }
        .box div{
            width:100%;height: 100%;position: absolute;left:-100%;font-size: 70px;text-align: center;line-height: 270px;top:0;color:#fff;
        }
        .rightB{
            width:50px;height:70px;font-size: 20px;color:#fff;background: rgba(0,0,0,0.5);position: absolute;right:0;top:45%;line-height:70px;text-align: center;cursor: pointer;display: none;
        }
        .leftB{
            width:50px;height:70px;font-size: 20px;color:#fff;background: rgba(0,0,0,0.5);position: absolute;left:0;top:45%;line-height:70px;text-align: center;cursor: pointer;display: none;
        }
        .color1{background: #FFB12F;}
        .color2{background: #00C378;}
        .color3{background: #26B2E3;}
        .color4{background: #E84C3D;}
        .color5{background: #F831FD;}
    </style>
    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
    <script>
        $(function(){
            var win=$(".win");
            var links=$(".title a");
            var float=$(".float");
            var divs=$(".box div");
            var num1=0;  //当前内容的下标
            var num2=0;
            win.hover(function(){
                $(".leftB,.rightB").css("display","block");
            },function(){
                $(".leftB,.rightB").css("display","none");
            });
            $(".leftB").click(function(){
                divs.finish();
                float.stop(true);
                var temp=num1;
                num1--;
                if(num1==-1){
                    num1=4;
                }
                divs.eq(num1).css("left",700).animate({left:0});
                divs.eq(temp).animate({left:-700});
                links.css("color","#009797");
                float.animate({left:links.eq(num1).position().left})
                links.eq(num1).css("color","#fff");
            });
            $(".rightB").click(function(){
                divs.finish();
                float.stop(true);
                var temp=num1;
                num1++;
                if(num1==5){
                    num1=0;
                }
                divs.eq(num1).css("left",-700).animate({left:0});
                divs.eq(temp).animate({left:700});
                links.css("color","#009797");
                float.animate({left:links.eq(num1).position().left})
                links.eq(num1).css("color","#fff");
            });
            links.hover(function(){
                //滑块操作
                divs.finish();
                float.stop(true);
                links.css("color","#009797");
                var that=$(this);
                var lefts=$(this).position().left;
                float.animate({left:lefts},function(){
                    that.css("color","#fff");
                })
                //滑块操作
                //内容变化
                var index=$(this).index(".title a");
                num2=index;
                if(num1==num2){
                    return;
                }else if(num1<num2){
                    divs.eq(num2).css("left",700).animate({left:0});
                    divs.eq(num1).animate({left:-700});
                }else if(num1>num2){
                    divs.eq(num2).css("left",-700).animate({left:0});
                    divs.eq(num1).animate({left:700});
                }
                num1=num2;
                num2="";
            },function(){

            })
        })
    </script>
</head>
<body>
<div class="win">
    <div class="title">
        <a href="javascript:;" style="color:#fff">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
        <div class="float"></div>
    </div>
    <div class="box">
        <div class="color1" style="left:0">page1</div>
        <div class="color2">page2</div>
        <div class="color3">page3</div>
        <div class="color4">page4</div>
        <div class="color5">page5</div>
    </div>
    <div class="leftB">&lt;</div>
    <div class="rightB">&gt;</div>
</div>
</body>
</html>
标签:
z
给个赞 24 人点赞
收藏 76 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
应勤
应勤前天 10:097F
学习了,感谢
举报 支持 (0) 回复 (0)
yuanjun
yuanjun7 天前6F
为什么a标签是内联元素却可以设置宽和高?不需要转换成inline-block吗?
举报 支持 (0) 回复 (0)
huahua_1994
huahua_19942017-03-16 21:31:405F
emoticon //@994399414:不错不错,技术很好,就是和我的一模一样!!!emoticon
举报 支持 (0) 回复 (0)
994399414
9943994142017-03-15 17:04:064F
不错不错,技术很好,就是和我的一模一样!!!emoticon
举报 支持 (0) 回复 (1)
183845jxy
183845jxy2017-03-14 11:46:053F
圆,厉害了
举报 支持 (0) 回复 (0)
ljc1335066273
ljc13350662732017-03-14 11:37:422F
借宝地试验下nodejs
举报 支持 (0) 回复 (0)
zzmisss
zzmisss2017-03-14 09:20:061F
效果挺好的,兼容性不太好。
举报 支持 (0) 回复 (0)
y_lin_sheng y_lin_sheng 作者

作者最新