项目-mysite

该页面主要包括：
1.第一部分：轮播图、汉堡按钮、文字；
2.第二部分：利用绝对定位布局的图片；
3.第三部分：具有缩放效果的图片列表；
4.页脚

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>travel</title>
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="./index.js"></script>
</head>
<body>
    <div id="menuBtn"><img src="images/menu.png"></div>
    <div id="menu" class="open">
        <div class="b1">
            <ul>
                <li>
                    <a href="#">Basics</a>
                </li>
                <li>
                    <a href="#">Guides & Turorials</a>
                </li>
                <li>
                    <a href="#">Tips & Upgrading</a>
                </li>
                <li>
                    <a href="#">Help</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="slider">
        <ul class="main">
            <li class="slider-pics"><a href="#"><img src="images/see.jpg"></a></li>
            <li class="slider-pics"><a href="#"><img src="images/tree.jpg"></a></li>
            <li class="slider-pics"><a href="#"><img src="images/hollywood.jpg"></a></li>
            <li class="slider-pics"><a href="#"><img src="images/beach.jpg"></a></li>
        </ul>
        <div id="text">
            <p>The world you have never seen</p>
            <p>I want to have a nice holiday with you</p>
            <div id="exploreBtn">explore</div>
        </div>
        <div class="slider-circle open">
            <ul class="slider-nav">
                <li class="slider-item item-select"></li>
                <li class="slider-item"></li>
                <li class="slider-item"></li>
                <li class="slider-item"></li>
            </ul>
        </div>
        <div class="slider-button open">
            <a href="#" class="slider-pre"><</a>
            <a href="#" class="slider-next">></a>
        </div>
    </div>


    <div id="middle">
        <div id="leftText">
            <h2>The 50 Best Places to Travel in 2018</h2>
            <p>From a remote, idyllic 
                island to the world's design capital, 
                these destinations have never been better. 
                Start planning your 2018 travel now.
            </p>
        </div>
        <p id="name">The best place</p>
        <div id="view">View more</div>
        <img src="images/right.png" id="rightImg">
    </div>
    
    <div id="detailImg">
        <img src="images/house.jpg" class="smallImg">
        <img src="images/jump.jpg" class="smallImg">
        <img src="images/building.jpg" class="smallImg">
        <img src="images/shadow.jpg" class="smallImg">
        
    </div>
        
    <div id="contact">
        <p>GET IN TOUCH WITH US</p>
        <input type="text" id="email" placeholder="ENTER YOUR EMAIL">
    </div>
    
    <div id="bottom">
        <ul>
            <li>HOME</li>
            <li>ABOUT</li>
            <li>CONTEACT</li>
            <li>IDEAS</li>
        </ul>
    </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding:0;
}
a{
    text-decoration: none;
    color: #a19f9f;
}
/*用css直接设置或者用jQuery的width()方法都可以。
.slider ul li img{
    width: 1349px;
    height: 604px;
}*/
/*给汉堡按钮定位并调整大小*/
#menuBtn{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}
#menuBtn img{
    width: 30px;
    height: 30px;
    cursor: pointer;
}
/*给菜单项定位并添加边框等样式*/
#menu{
    position: absolute;
    top:70px;
    left: 10px; 
    width:300px;
    z-index: 9;/*menu的层级要比轮播项目的高，否则会被图片覆盖住*/
}
.open{
    display: none;
}
#menu ul{
    border: 1px solid #cfcfcf;
    border-radius: 20px;
    font-size: 23px;
    background-color: rgb(245, 245, 245);
}
#menu li{
    padding:15px;
}

/*轮播图*/
.slider{
    position: relative;
}
.slider-pics{
    position: absolute;
    z-index: 8;
}
/*轮播指标*/
/*只能单独设置.slider-circle，否则设置不了。
.slider.slider-circle{
    height: 600px;
    width: 100px;
}*/
.slider-circle{
    height: 20px;
    width: 200px;
    position: absolute;
    top: 730px;
    left: 50%;
    z-index: 9;
}
.slider-circle ul{
    list-style-type: none;
    display: flex;
}
.slider-item{
    border: 1px solid #a19f9f;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #fcfcfc;
    margin-left: 5px;
    cursor:pointer;
}
.item-select{
    background-color: rgb(7, 131, 214);
}

/*轮播导航*/
.slider-button a{
    font-size: 40px;
    background-color: #cccaca;
    opacity: 0.5;
    color: #fcfcfc;
}
.slider-pre,.slider-next{
    position: absolute;
    top: 300px;
    font-size: 20px;
    z-index: 9;
}
.slider-pre{
    left: 0;
}
.slider-next{
    right: 0;
}
/*轮播图的文字*/
#text{
    position: absolute;
    top: 200px;
    left: 100px;
    z-index: 8;
    color: white;
    font-size: 35px;
}
#exploreBtn{
    border: 1px solid white;
    font-size: 28px;
    padding: 5px;
    margin-top:10px;
    width:140px;
    text-align: center;
}

#middle{
    padding-top: 800px;
}
#leftText{
    width: 300px;
    margin-left: 20%;
    line-height: 1.5;
    margin-top: 160px;
}
#view{
    border: 1px solid black;
    padding: 5px;
    width: 130px;
    margin:100px auto 150px 20%;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}
#name{
    position: absolute;
    top: 800px;
    right: 20%;
    font-size: 38px;
    font-weight: bold;
}
#rightImg{
    position: absolute;
    width: 320px;
    top: 860px;
    right: 18%;
}

/*图片列表*/
#detailImg{
    /*display: flex;该属性会让图片间没有留白，且高度过高，导致图片过度拉伸。*/
    flex-direction: row;
    margin:0 10%;
}
.smallImg{
    width: 24%;/*flex-direction: row 会使图片与图片间有空隙，因此不能设置为25%*/
    cursor: pointer;
    transition: all 0.5s;
}
#detailImg img:hover{
    transform: scale(1.2,1.2);
}

#contact{
    text-align: center;
    margin:10% auto;
}
#contact p{
    font-weight: bold;
    font-size: 20px;
}
#contact input{
    text-align: center;
    margin-top: 23px;
    font-size: 16px;
    padding:10px;
    width: 300px;
}

/*页脚*/
#bottom{
    background-color: black;
    color: white;
}
#bottom ul{
    display: flex;
    list-style-type: none;
    width: 500px;
    margin:auto; 
}
#bottom li{
    margin:20px 30px;
    font-size: 18px;
    cursor: pointer;
}

jQuery

$(function(){
    var $winWidth=$(window).width();//获取窗口宽度，并赋值给变量winWidth。
    $(".slider-pics img").width($winWidth);//更改轮播图项目的宽度。

    //汉堡按钮
    $("#menuBtn").on("click",function(){
        if($("#menu").hasClass("open")){
            $("#menu").removeClass("open");
        }else{
            $("#menu").addClass("open");
        }
    })

    //轮播图
    function change(preIndex,currentIndex){
        /* .item-select是添加在.slider-item上的，因此这里应该与.slider-pics分开写
        $(".slider-pics").eq(preIndex).hide().removeClass("item-select")
        .parent().children().eq(currentIndex).show().addClass("item-select");*/
        $(".slider-pics").eq(preIndex).hide()
        .parent().children().eq(currentIndex).show();
        $(".slider-item").removeClass("item-select");
        $(".slider-item").eq(currentIndex).addClass("item-select");
    }
    var currentIndex=0;
    var len=$(".slider-pics").length;
    function pre(){
        preIndex=$(".slider-item").filter(".item-select").index();
        /*change()方法需要两个参数，而下面的函数只适用于最多一个参数的轮播函数。
        preIndex--;
        if(preIndex<0){
            preIndex=len-1;
        }
        change(preIndex,currentIndex);*/
        currentIndex=(--currentIndex+len) % len;
        change(preIndex,currentIndex);
    }
    function next(){
        preIndex=$(".slider-item").filter(".item-select").index();
        /*change()方法需要两个参数，而下面的函数只适用于最多一个参数的轮播函数。
        currentIndex++;
        if(currentIndex==len){
            currentIndex=0;
        }
        change(preIndex,currentIndex);*/
        currentIndex= ++currentIndex % len;
        change(preIndex,currentIndex);
    }

    /*hover()方法接受至少一个参数，因此这里没有任何参数的hover()方法无效
    function point(){
        preIndex=$(".select-itm").filter(".item-select").index();
        currentIndex=$(".select-itm").hover().index();
        change(preIndex,currentIndex);
    }*/

    var intervel,hasStarted=true;
    function start(){
        if(hasStarted){
            //change(preIndex,currentIndex);
            /*setTimeout(next,1000);由于setTimeout调用的是next方法，而最后onload事件调用的是start函数，因此无法实现每隔一秒调用一次next方法。
              另外，停止setInterval与setTimeout一定要用间歇ID或超时ID，否则无法停止。
            */
            intervel=setInterval(next,1000);
        }else{
            clearInterval(intervel);
            hasStarted=false;
        }
    }
    start();
    
    //轮播指标
    $(".slider-item").on("click",function(){
        preIndex=$(".slider-item").filter(".item-select").index();
        currentIndex=$(this).index();
        change(preIndex,currentIndex);
    })

    //自动轮播
    /*方法二：
    var interval, hasStarted=false;
    function start(){
        if(!hasStarted){
            hasStarted=true;
            interval=setInterval(next,1000);
        }
    }
    start();
    function stop(){
        clearInterval(interval);
        hasStarted=false;
    }
    $(".slider-pics").hover(function(){
        stop();
    },function(){
        start();
    })*/
    /*将除第一张以外的轮播项目全部隐藏，否则会出现以下情况:
      1.刷新页面时所有的轮播项目都会加载一遍，然后才开始绝对定位；
      2.最后一个轮播项目在页面最上层，且设置z-index无效；
      3.轮播无法正常启用。*/ 
    $(".slider-pics:not(':first')").hide();

    //鼠标悬浮和离开时各导航组件的样式
    $(".slider-pics,.slider-circle,.slider-button").hover(function(){
        $(".slider-circle,.slider-button").removeClass("open");
        hasStarted=false;
        start();
    },function(){
        $(".slider-circle,.slider-button").addClass("open");
        hasStarted=true;
        start();
    })
    
    //绑定轮播导航
    $(".slider-next").on("click",function(){
        next();
    })
    $(".slider-pre").on("click",function(){
        pre();
    })
})

第一部分

这是整个页面花费代码量最多的部分，这其中最复杂的要数轮播图了。
这部分中运用了大量的绝对定位，为避免各图层间互相干扰，我对汉堡按钮、导航菜单、轮播指标、轮播项目、轮播导航以及文字都添加了z-index属性。
对轮播项目运用了绝对定位后，出现了最后一张图片出现在页面上，而第一张图片反而被隐藏了，且每次刷新页面都会先把所有的轮播项目加载一遍再对其绝对定位。这里就需要利用jQuery的：not()以及hide()方法将除第一张项目以外的其余图片全部隐藏。
在处理轮播项目的宽度时，我并没有用css的width属性来处理，而是选择了jQuery函数中的width()方法，节省了计算的时间。
为了降低代码的耦合度，我对轮播导航及轮播指标添加了类名open和item-select：.open用于控制轮播导航和轮播指标在鼠标悬浮或移出时能展开或隐藏；.item-select则用于控制轮播指标的背景颜色。通过利用jQuery的removeClass()和addClass()来控制他们的显示 / 隐藏。
在编写轮播图函数start()时，需要弄清楚是用setTimeout还是setInterval，两者的区别在于setTimeout是在到达指定时间后将指定的事件添加到事件队列中，而setInterval则是用于每隔指定时间就将指定的事件添加到事件队列中。因此在这里选用了setInterval。此外，如果要停止setInterval，则必须要用间歇ID，否则不仅无法停止，还会让轮播特效出现异常。
要想让图片自动播放，除了利用 if-else语句，还可以用其它办法，具体见注释中的“方法二”。

第二部分

这部分中，由于上面运用了大量的绝对定位，导致文字被覆盖，为了避免出现网页中过量的绝对定位的情况，这里利用调整元素的内边距的方法来显示文字（设置外边距的话，会把轮播图挤到页面下方）。而图片则是利用绝对定位使其固定在文字右侧。

第三部分

这里是采用了flex布局使图片列表水平排列，由于display: flex会让图片的高度出现过度拉伸的情况，因此直接使用flex-direction属性进行布局。这里需要注意一点：flex-direction属性会使图片与图片之间出现留白，因此图片的宽度就不能设置为25%。

第四部分

页脚主要就是对列表进行flex布局即可。

总结

这个网页花费时间最多的就是在jQuery函数的编写上，遇到的问题的解决方案以及原因都在代码相应位置注释了。通过编写代码让我认识到，在编程这条路上我还只是在途中，而一个很小的知识点如果继续深究下去，那将是个深渊，虽然很丧，但是努力爬出深渊后的成就感确是成倍的。

最终成果见下图：
travel.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,042评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 89,996评论 2赞 384
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,674评论 0赞 345
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,340评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,404评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,749评论 1赞 289
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,902评论 3赞 405
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,662评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,110评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,577评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,258评论 4赞 328
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,848评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,726评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,952评论 1赞 264
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,271评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,452评论 2赞 348

推荐阅读更多精彩内容