带动画的前端开发轮播代码

卫士通前端开发笔试题|web前端开发规范 2018|网站前端开发

图片限制不能上传全部的效果,就只上传第一个的图片,望见谅。
我的思路是:先将所有的全部隐藏,动画通过特定的类来调用,然后用js来在不同的状态设置不同的类名,这样达到轮播+动画的效果。好处是:js代码少。缺点很明显就是css部分太多了,仅一个banner都700+的代码(当然只是针对我的代码来说,有心人若是看了css就会知道这css可以压缩很多的……)。

代码:
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发 编辑器 外国:banner轮播</title>
    <style>
        html {
            font-size: 62.5%;
        }
        body {
            font-size: 1.6rem;
            font-size: 16px;
            margin: 0px;
            padding: 0px;
            font-family: ‘微软雅黑 Regular’, ‘微软雅黑’;
        }
        #wrap {
            width: 1349px;
            height: 316px;
            overflow: hidden;
            position: relative;
        }
        .img {
            position: absolute;
            opacity: 0;
        }
        .img0 {
            opacity: 1;
        }
        .img1 {
            opacity: 1;
        }
        .img2 {
            opacity: 1;
        }
        .img>.beijing {
            width: 1349px;
        }
        #wrapLeft,
        #wrapRight {
            position: absolute;
            z-index: 99;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, .5);
            color: white;
            line-height: 30px;
            text-align: center;
            top: 150px;
            cursor: pointer;
        }
        #wrapLeft:hover,
        #wrapRight:hover {
            background-color: blue;
        }
        #wrapLeft {
            left: 0px;
        }
        #wrapRight {
            right: 0px;
        }
        .jiantou {
            position: absolute;
            top: 110px;
            z-index: 99;
            left: 280px;
            opacity: 0;
        }
        .img h4 {
            width: 200px;
            position: absolute;
            z-index: 99;
            text-align: center;
            top: 115px;
            left: 375px;
            opacity: 0;
            /*top: 115px;
left: 395px;
*/
        }
        .img h1 {
            width: 200px;
            position: absolute;
            z-index: 99;
            text-align: center;
            top: 165px;
            left: 395px;
            /*top: 145px;
left: 395px;*/
            opacity: 0;
        }
        .purchase {
            width: 150px;
            height: 30px;
            position: absolute;
            z-index: 99;
            top: 220px;
            background-color: #F96E52;
            border-radius: 5px;
            line-height: 30px;
            text-align: center;
            left: 720px;
            /*left: 420px;*/
            opacity: 0;
        }
        .guysha {
            position: absolute;
            top: 315px;
            z-index: 99;
            right: 235px;
            opacity: 0;
        }
        .deng {
            position: absolute;
            top: -345px;
            z-index: 99;
            right: 95px;
            opacity: 0;
        }
        .guy {
            position: absolute;
            top: 0px;
            z-index: 99;
            right: 235px;
            opacity: 0;
        }
        .img0 .jiantou {
            -webkit-animation: jiantouchuxian1 .9s linear forwards;
            -o-animation: jiantouchuxian1 .9s linear forwards;
            animation: jiantouchuxian1 .9s linear forwards;
        }
        /*箭头出现*/
        @keyframes jiantouchuxian1 {
            0% {
                opacity: 1;
            }
            50% {
                top: 115px;
                left: 290px;
            }
            90% {
                top: 125px;
                left: 305px;
            }
            100% {
                top: 120px;
                left: 300px;
                opacity: 1;
            }
        }
        /*h4出现*/
        .img0 .h1 {
            -webkit-animation: h1chuxian1 .5s .9s linear forwards;
            -o-animation: h1chuxian1 .5s .9s linear forwards;
            animation: h1chuxian1 .5s .9s linear forwards;
        }
        @keyframes h1chuxian1 {
            0% {
                opacity: 1;
            }
            50% {
                top: 155px;
            }
            90% {
                top: 140px;
            }
            100% {
                top: 145px;
                opacity: 1;
            }
        }
        /*h1出现*/
        .img0 .h4 {
            -webkit-animation: h4chuxian1 .5s .9s linear forwards;
            -o-animation: h4chuxian1 .5s .9s linear forwards;
            animation: h4chuxian1 .5s .9s linear forwards;
        }
        @keyframes h4chuxian1 {
            0% {
                opacity: 1;
            }
            50% {
                left: 385px;
            }
            90% {
                left: 400px;
            }
            100% {
                left: 395px;
                opacity: 1;
            }
        }
        /*purchase出现*/
        .img0 .purchase {
            -webkit-animation: purchasechuxian1 .9s linear 1s forwards;
            -o-animation: purchasechuxian1 .9s linear 1s forwards;
            animation: purchasechuxian1 .9s linear 1s forwards;
        }
        @keyframes purchasechuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 560px;
                opacity: .5;
            }
            90% {
                left: 418px;
            }
            100% {
                left: 420px;
                opacity: 1;
            }
        }
        /*.guysha出现*/
        .img0 .guysha {
            -webkit-animation: guyshachuxian1 .9s linear 1.9s forwards;
            -o-animation: guyshachuxian1 .9s linear 1.9s forwards;
            animation: guyshachuxian1 .9s linear 1.9s forwards;
        }
        @keyframes guyshachuxian1 {
            0% {
                opacity: 1;
            }
            50% {
                top: 157.5px;
            }
            100% {
                top: 0px;
                opacity: 1;
            }
        }
        /*灯出现*/
        .img0 .deng {
            -webkit-animation: dengchuxian1 .9s linear 2.8s forwards;
            -o-animation: dengchuxian1 .9s linear 2.8s forwards;
            animation: dengchuxian1 .9s linear 2.8s forwards;
        }
        @keyframes dengchuxian1 {
            0% {
                opacity: 1;
            }
            50% {
                top: -170px;
            }
            100% {
                top: 0px;
                opacity: 1;
            }
        }
        /*guy出现*/
        .img0 .guy {
            -webkit-animation: guychuxian1 .9s linear 3.1s forwards;
            -o-animation: guychuxian1 .9s linear 3.1s forwards;
            animation: guychuxian1 .9s linear 3.1s forwards;
        }
        @keyframes guychuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: .5;
            }
            100% {
                opacity: 1;
            }
        }
        /*第一张图结束*/
        /*第二张图开始*/
        .img .ourfeat {
            position: absolute;
            z-index: 99;
            left: 500px;
            top: 160px;
            opacity: 0;
        }
        .img .left1 {
            position: absolute;
            z-index: 99;
            left: 450px;
            top: 60px;
            opacity: 0;
        }
        .img .clear {
            position: absolute;
            z-index: 99;
            left: 325px;
            top: 40px;
            opacity: 0;
        }
        .img .left2 {
            position: absolute;
            z-index: 99;
            left: 380px;
            top: 165px;
            opacity: 0;
        }
        .img .responsive {
            position: absolute;
            z-index: 99;
            left: 180px;
            top: 165px;
            opacity: 0;
        }
        .img .left3 {
            position: absolute;
            z-index: 99;
            left: 435px;
            top: 225px;
            opacity: 0;
        }
        .img .bootstrap {
            position: absolute;
            z-index: 99;
            left: 245px;
            top: 275px;
            opacity: 0;
        }
        .img .right1 {
            position: absolute;
            z-index: 99;
            left: 800px;
            top: 65px;
            opacity: 0;
        }
        .img .solid {
            position: absolute;
            z-index: 99;
            left: 920px;
            top: 40px;
            opacity: 0;
        }
        .img .right2 {
            position: absolute;
            z-index: 99;
            left: 845px;
            top: 165px;
            opacity: 0;
        }
        .img .lightweight {
            position: absolute;
            z-index: 99;
            left: 985px;
            top: 165px;
            opacity: 0;
        }
        .img .right3 {
            position: absolute;
            z-index: 99;
            left: 800px;
            top: 225px;
            opacity: 0;
        }
        .img .fresh {
            position: absolute;
            z-index: 99;
            left: 920px;
            top: 275px;
            opacity: 0;
        }
        /*动画*/
        /*ourfeat出现*/
        .img1 .ourfeat {
            animation: ourfeatchuxian1 .9s linear forwards;
        }
        @keyframes ourfeatchuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: .5;
                top: 155px;
            }
            90% {
                top: 154px;
            }
            100% {
                top: 155px;
                opacity: 1;
            }
        }
        /*left1出现*/
        .img1 .left1 {
            animation: left1chuxian1 .9s linear .9s forwards;
        }
        @keyframes left1chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 447px;
            }
            95% {
                left: 443px;
            }
            100% {
                left: 445px;
                opacity: 1;
            }
        }
        /*clear出现*/
        .img1 .clear {
            animation: clearchuxian1 .9s linear 1.8s forwards;
        }
        @keyframes clearchuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 330px;
            }
            95% {
                left: 337px;
            }
            100% {
                left: 335px;
                opacity: 1;
            }
        }
        /*left2出现*/
        .img1 .left2 {
            animation: left2chuxian1 .9s linear 2.7s forwards;
        }
        @keyframes left2chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 375px;
            }
            95% {
                left: 367px;
            }
            100% {
                left: 370px;
                opacity: 1;
            }
        }
        /*responsive出现*/
        .img1 .responsive {
            animation: responsivechuxian1 .9s linear 3.6s forwards;
        }
        @keyframes responsivechuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 185px;
            }
            95% {
                left: 193px;
            }
            100% {
                left: 190px;
                opacity: 1;
            }
        }
        /*left3出现*/
        .img1 .left3 {
            animation: left3chuxian1 .9s linear 4.5s forwards;
        }
        @keyframes left3chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 430px;
            }
            95% {
                left: 422px;
            }
            100% {
                left: 425px;
                opacity: 1;
            }
        }
        /*.bootstrap出现*/
        .img1 .bootstrap {
            animation: bootstrapchuxian1 .9s linear 5.4s forwards;
        }
        @keyframes bootstrapchuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 250px;
            }
            95% {
                left: 258px;
            }
            100% {
                left: 255px;
                opacity: 1;
            }
        }
        /*right1出现*/
        .img1 .right1 {
            animation: right1chuxian1 .9s linear 6.3s forwards;
        }
        @keyframes right1chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 805px;
            }
            95% {
                left: 813px;
            }
            100% {
                left: 810px;
                opacity: 1;
            }
        }
        /*solid出现*/
        .img1 .solid {
            animation: solidchuxian1 .9s linear 7.2s forwards;
        }
        @keyframes solidchuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 915px;
            }
            95% {
                left: 907px;
            }
            100% {
                left: 910px;
                opacity: 1;
            }
        }
        /*right2出现*/
        .img1 .right2 {
            animation: right2chuxian1 .9s linear 7.2s forwards;
        }
        @keyframes right2chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 850px;
            }
            95% {
                left: 858px;
            }
            100% {
                left: 855px;
                opacity: 1;
            }
        }
        /*.lightweight出现*/
        .img1 .lightweight {
            animation: lightweightchuxian1 .9s linear 8.1s forwards;
        }
        @keyframes lightweightchuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 980px;
            }
            95% {
                left: 972px;
            }
            100% {
                left: 975px;
                opacity: 1;
            }
        }
        /*right3出现*/
        .img1 .right3 {
            animation: right3chuxian1 .9s linear 9s forwards;
        }
        @keyframes right3chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 805px;
            }
            95% {
                left: 813px;
            }
            100% {
                left: 810px;
                opacity: 1;
            }
        }
        /*fresh出现*/
        .img1 .fresh {
            animation: freshchuxian1 .9s linear 9.9s forwards;
        }
        @keyframes freshchuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 915px;
            }
            95% {
                left: 907px;
            }
            100% {
                left: 910px;
                opacity: 1;
            }
        }
        /*第二张图结束*/
        /*第三章图*/
        .img2 .rb3 {
            position: absolute;
            top: 100px;
            z-index: 99;
            left: 270px;
            opacity: 0;
        }
        .img2 .inspira {
            width: 150px;
            position: absolute;
            z-index: 99;
            top: 165px;
            left: 385px;
            opacity: 0;
        }
        .img2 .h3 {
            width: 300px;
            position: absolute;
            z-index: 99;
            top: 190px;
            left: 375px;
            opacity: 0;
            color: white;
        }
        .img2 .purchase3 {
            width: 150px;
            height: 30px;
            position: absolute;
            z-index: 99;
            top: 245px;
            background-color: #F96E52;
            border-radius: 5px;
            line-height: 30px;
            text-align: center;
            left: 375px;
            /*left: 420px;*/
            opacity: 0;
        }
        /*动画*/
        /*rb3出现*/
        .img2 .rb3 {
            animation: rb3chuxian1 .9s linear forwards;
        }
        @keyframes rb3chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 275px;
            }
            95% {
                left: 283px;
            }
            100% {
                left: 280px;
                opacity: 1;
            }
        }
        /*inspira出现*/
        .img2 .inspira {
            animation: inspirachuxian1 .9s linear .9s forwards;
        }
        @keyframes inspirachuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                top: 160px;
            }
            95% {
                top: 152px;
            }
            100% {
                top: 155px;
                opacity: 1;
            }
        }
        /*h3出现*/
        .img2 .h3 {
            animation: h3chuxian1 .9s linear 1.8s forwards;
        }
        @keyframes h3chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 380px;
            }
            95% {
                left: 388px;
            }
            100% {
                left: 385px;
                opacity: 1;
            }
        }
        /*purchase3出现*/
        .img2 .purchase3 {
            animation: purchase3chuxian1 .9s linear 2.7s forwards;
        }
        @keyframes purchase3chuxian1 {
            0% {
                opacity: 0;
            }
            50% {
                left: 380px;
            }
            95% {
                left: 388px;
            }
            100% {
                left: 385px;
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id=”wrap”>
        <div id=”wrapLeft”>
            <</div>
                <div class=”img img0″>
                    <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/01/003227avdqnw46fcga466j.jpg” alt=”” class=”beijing”>
                    <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/01/003227f1fjnfjojm8f11f1.png” alt=”” class=”jiantou”>
                    <h4 class=”h4″>Inspira designed for</h4>
                    <h1 class=”h1″>winer</h1>
                    <div class=”purchase”>Purchase Now</div>
                    <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/01/002749xhhb5t932t3th59s.png” alt=”” class=”guysha”>
                    <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/01/002749b6w8uzwfmz8muwn6.png” alt=”” class=”guy”>
                    <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201609/01/002751ggg0ya61yiy3ii7i.png” alt=”” class=”deng”>
                </div>
                <div class=”img”>
                    <img src=”images-slider/wide1.jpg” alt=”” class=”beijing”>
                    <img src=”images-slider/our-features.png” alt=”” class=”ourfeat”>
                    <img src=”images-slider/lu.png” alt=”” class=”left1″>
                    <img src=”images-slider/clean.png” alt=”” class=”clear”>
                    <img src=”images-slider/lm.png” alt=”” class=”left2″>
                    <img src=”images-slider/responsive.png” alt=”” class=”responsive”>
                    <img src=”images-slider/lb.png” alt=”” class=”left3″>
                    <img src=”images-slider/bootstrap.png” alt=”” class=”bootstrap”>
                    <img src=”images-slider/ru.png” alt=”” class=”right1″>
                    <img src=”images-slider/solid.png” alt=”” class=”solid”>
                    <img src=”images-slider/rm.png” alt=”” class=”right2″>
                    <img src=”images-slider/lightweight.png” alt=”” class=”lightweight”>
                    <img src=”images-slider/rb.png” alt=”” class=”right3″>
                    <img src=”images-slider/fresh.png” alt=”” class=”fresh”>
                </div>
                <div class=”img”>
                    <img src=”images-slider/wide1.jpg” alt=”” class=”beijing”>
                    <img src=”images-slider/rb.png” alt=”” class=”rb3″>
                    <img src=”images-slider/inspira.png” alt=”” class=”inspira”>
                    <h3 class=”h3″>Most Complete Template Ever</h3>
                    <div class=”purchase3″>Purchase Now</div>
                </div>
                <div id=”wrapRight”>></div>
        </div>
</body>
<script>
    var start = 0;
    var imgs = document.getElementsByClassName(“img”);
    var right = document.getElementById(“wrapRight”);
    var left = document.getElementById(“wrapLeft”);
    var time;
    //下一张图片
    function nextImg() {
        start = start + 1
        start = start > 2 ? 0 : start;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].className = “img”;
        }
        imgs[start].className = “img ” + “img” + start;
        clearInterval(time);
        aotoPlay()
    }
    //上一张图片
    function lastImg() {
        start = start – 1;
        start = start < 0 ? 2 : start;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].className = “img”;
        }
        imgs[start].className = “img ” + “img” + start;
        clearInterval(time);
        aotoPlay()
    }
    window.onload = function () {
        console.log(imgs.length);
        aotoPlay(start);
        right.addEventListener(‘click’, nextImg, false);
        left.addEventListener(‘click’, lastImg, false);
    }
    //自动轮播
    function aotoPlay() {
        time = setInterval(nextImg, 10000);
    }
</script>
</html>

应届生web前端开发笔试题|web前端开发薪资职友集|前端开发自学书记

» 本文来自:前端开发者 » 《带动画的前端开发轮播代码》
» 本文链接地址:https://www.rokub.com/3918.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!