项目-mysite

作者: 子却 | 来源:发表于2018-11-01 17:07 被阅读0次

该页面主要包括：
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

项目-mysite

HTML

CSS

jQuery

第一部分

第二部分

第三部分

第四部分

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读