position定位与轮播图制作

最新推荐文章于 2022-08-12 19:11:12 发布

原创最新推荐文章于 2022-08-12 19:11:12 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

javascript 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS/CSS3

3 篇文章

订阅专栏

本文详细解析了CSS中position属性的四种定位方式：static、relative、absolute及fixed，并通过实例展示了每种定位的效果。此外，还提供了一个轮播图的实现案例，包括HTML结构、CSS样式和JavaScript交互逻辑。

position定位

相信前端的小伙伴对position定位都不会陌生，他是CSS里非常重要的一个属性元素，他的属性值有四种，如下所示（以下解释来源于文档）：

static：默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何
top、bottom、left 或 right 声明）。

relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20”
会将元素移至元素正常位置左边 20 个像素的位置。 absolute 位置设置为 absolute
的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom”
属性来规定。

fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过
“left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于
IE7（strict 模式）。

用我自己的方式去理解，大概总结如下：
1、absolute：绝对定位，脱离文档流，不会单独占满一行，方位只受到top、bottom、left、right的影响。如果他的父元素做了定位，就相对于是最近的一个父元素；如果父元素没有定位，则相当于body（网页）。

2、relative：相对定位，没有脱离文档流，会单独占满一行，方位受到top、bottom、left、right的影响。这四个相对于块的relative最近的一个父元素，可以设置浮动。

3、fixed：固定定位。脱离了文档流，不会单独占满一行；他的top、bottom、left、right始终相对于body。

4、static：默认值，top、bottom、left、right只有设置了前面三个的时候有用。

代码如下所示：

/*CSS代码*/
.pin {
            margin: 100px 0 0 100px;
        }
.abs {
            width: 200px;
            height: 200px;
            border: solid 5px red;
            position: absolute;
            left: 40px;
            top: 40px;
}
.rel {
            width: 150px;
            height: 150px;
            border: solid 5px yellow;
            position: relative;
            left: 40px;
            top: 40px;
        }
.fix {
            width: 100px;
            height: 100px;
            border: solid 5px blue;
            position: fixed;
            left: 40px;
            top: 40px;
        }
.sta {
            width: 50px;
            height: 50px;
            border: solid 5px green;
            position: static;
            left: 40px;
            top: 40px;
        }

<!--HTML代码-->
<div class="pin">
    <div class="abs"></div>
    <div class="rel"></div>
    <div class="fix"></div>
    <div class="sta"></div>
</div>

可以改变div嵌套，自己发现不一样的惊喜，看看是不是如上面的解释所说，定位有相对的变化。

制作轮播图

制作轮播图需要一步一步来，它主要又三个部分嵌套：
最外层的图片（需要叠加成一张图）、前进后退的标识（< 和 >）、底下小圆点点击事件。

HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="index.css">
    <script src="../../bs/js/jquery-1.8.3.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <!--制作图片-->
    <div id="igs">
        <div class="ig"><img src="../images/11747.jpg" height="500" width="1000"/></div>
        <div class="ig"><img src="../images/11773.jpg" height="500" width="1000"/></div>
        <div class="ig"><img src="../images/11777.jpg" height="500" width="1000"/></div>
        <div class="ig"><img src="../images/11786.jpg" height="500" width="1000"/></div>
        <div class="ig"><img src="../images/11824.jpg" height="500" width="1000"/></div>
        <div class="ig"><img src="../images/11855.jpg" height="500" width="1000"/></div>
    </div>
    <!--制作前进后退的标识-->
    <div class="btn btn1"><</div><div class="btn btn2">></div>
    <!--制作轮播图圆点-->
    <div id="tabs">
        <div class="tab lp"></div>
        <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div>
        <div class="tab"></div>
    </div>
</body>
</html>

js代码

var i = 0;
var timer = null;
$(function () {
    //除第一个图片，其他隐藏
   $(".ig").eq(0).show().siblings().hide();
   //鼠标移动覆盖显示，其余隐藏
   $("#igs").hover(function () { $(".btn").show(); }, function () { $(".btn").hide(); });
   showTime();
   //覆盖停止时间
   $(".tab").hover(function () {
       i = $(this).index();
       Show();
       clearInterval(timer);//清除轮播
   }, function () {
       showTime();
   });
//点击 > 事件
   $(".btn1").click(function () {
       clearInterval(timer);
       i = (i+5)%6;
       Show();
       showTime();
   });
   //点击 < 事件
    $(".btn2").click(function () {
        clearInterval(timer);
        i = (i+1)%6;
        Show();
        showTime();
    });
});
//点击圆点事件
function Show() {
    $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
    $(".tab").eq(i).addClass("lp").siblings().removeClass("lp");
}
function showTime() {
    timer = setInterval(function () {
        i++;
        i = i%6;
        Show();
    },3000);
}

CSS代码：

* {
    padding: 0px;
    margin: 0px;
}
.ig {
    position: absolute;
}
.btn {
    position: absolute;
    height: 90px;
    width: 60px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    line-height: 90px;
    font-size: 40px;
    top: 205px;
    cursor: pointer;
    display: none;
}
.btn2 {
    left: 940px;
}
ul {
    list-style: none;
}
#tabs {
    position: absolute;
    top: 450px;
    left: 450px
}
.tab {
    width: 15px;
    height: 15px;
    background-color: #265a88;
    float: left;
    text-align: center;
    line-height: 30px;
    color: #fff;
    margin-right: 10px;
    border-radius: 100%;
    cursor: pointer;
}
.lp {
    background-color: #b92c28;
}
body {
    background: #eee;
}