找回密码
当前位置：前端开发者 > 教程 > 正文

网页轮播图_自动轮播图片

2018-07-06 分类：教程 阅读(725) 评论(0)

前端开发人员还需要看什么书？|软件开发大前端是什么意思？|前端开发是什么?

html 代码

<!DOCTYPE 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>

开发 前端 测试干什么的？|前端开发工程师kpi|上海web前端开发工程师招聘

赞(0)
前端开发者 » 网页轮播图_自动轮播图片
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论