十五、案例：安徽龙禧（banner轮播图）

发表于 | 更新于: | 分类于 ， ， |
| 字数: 1.7k | 时长 ≈ 8 分钟

十五、案例：安徽龙禧（banner轮播图）

UVJfbT.png

15.1 DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!-- header开始 -->
<!-- 同级的header 压盖住banner 绝对定位 子绝父相 -->
<div class=inner>
    <!-- inner位置固定 版心 作为绝对定位参考盒子 -->
    <div class="header">
        <!-- logo 使用 h1 标签 -->
        <h1 class="logo">
            <a href="">安徽龙禧</a>
        </h1>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="">
                        <span>西柚媒体</span>
                        <span>See you</span>
                </a></li>
                <li class="chance"><a href="">
                        <span>创世文化</span>
                        <span>See you</span>
                </a></li>
                <li><a href="">
                        <span>数字商屏</span>
                        <span>See you</span>
                </a></li>
                <li><a href="">
                        <span>柚货</span>
                        <span>See you</span>
                </a></li>
                <li><a href="">
                        <span>全诚推广</span>
                        <span>See you</span>
                </a></li>
                <li><a href="">
                        <span>整合传播</span>
                        <span>See you</span>
                </a></li>
                <li><a href="">
                        <span>关于龙禧</span>
                        <span>See you</span>
                </a></li>
            </ul>
        </div>
    </div>
</div>

<!-- banner -->
<div class="banner" id="banner">
    <!-- 呼吸轮播图 绝对定位 脱标 让出标准流的位置-->
    <div class="pic" id="imgs">
        <ul>
            <li><img src="images/banner1.jpg" alt=""></li>
            <li><img src="images/banner2.jpg" alt=""></li>
            <li><img src="images/banner3.jpg" alt=""></li>
            <li><img src="images/banner4.jpg" alt=""></li>
        </ul>
    </div>
    <!-- 版心 -->
    <div class="inner">
        <!-- 小圆点 -->
        <div class="circles" id="circles">
            <ol>
                <li class="cur"><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ol>
        </div>
    </div>
</div>

15.2 css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!-- 清楚默认样式 -->
<link rel="stylesheet" href="css/reset.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="css/index.css">

/* 公共样式 */
/* 版心 inner */
.inner {
    width: 1000px;
    /* 块级元素水平居中 */
    margin: 0 auto;
    /* 相对定位 不脱离标准文档流 不设置left或top，位置不会改变 */
    position: relative;
}

a {
    text-decoration: none;
    color: #665E73;
}

/* header 开始 */
.header {
    /* 压盖 绝对定位 */
    position: absolute;
    left: 0px;
    top: 19px;
    width: 992px;
    height: 103px;
    z-index: 9999;
}
.header .logo {
    /* logo 和 nav 同级元素 并排显示设置宽高 浮动 */
    /* 子盒子浮动要看看父盒子 height或overflow */
    float: left;
    width: 151px;
    height: 103px;
    overflow: hidden;
}
.header .logo a {
    /* a 行内元素 想设置宽高 转块 */
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/logo.png);
    /* 用户不能看到文字  挤出原位置后 父盒子溢出隐藏*/
    /* 首行缩进或用padding挤 */
    text-indent: -999em;
}
.header .nav {
    /* 同级元素要浮动都浮动 h1 浮动 nav也一定浮动 */
    float: left;
    /* 浮动元素脱标 不再区分块级和行内 不设置宽度 内容撑开 */
    height: 91px;
}
.header .nav ul li {
    /* 浮动float是盒子属性不能继承 祖先浮动和盒子没有任何关系 */
    float: left;
    width: 120px;
    height: 91px;
    border-right: 1px solid #EBEBEB;
    /* 为了实现 a:hover效果：下方留一点白色 需要将白色背景添加在li标签上 */
    background-color: #fff;
}
.header .nav ul li.chance {
    width: 114px;
}
.header .nav ul li a {
    display: block;
    /* 块级元素 不设置宽度 自动撑满父盒子的内容宽 */
    height: 67px;
    padding-top: 24px;
    line-height: 35px;
    font-size: 15px;
    text-align: center;
}
.header .nav ul li a span {
    display: block;
}
.header .nav ul li a span:last-child {
    font-size: 12px;
    line-height: 14px;
    color: #C7CBD7;
}
.header .nav ul li a:hover {
    /* a 标签 书写的样式都会渲染在4个伪类上 */
    border-top: 4px solid #F28D00;
    /* 白色背景不能渲染在 a标签上 因为hover会将 a相同的效果层叠掉 */
    background-color: #F9F9F9;
    /* 位置微调 相对定位 相对于原位置进行偏移 */
    position: relative;
    top: -4px;
    left: 0px;
    /* 显示hover 最终占有高度是91px 将height内减 */
    height: 63px;
}

/* banner 开始 */
.banner {
    /* 标准流 */
    width: 100%;
    height: 665px;
    position: relative;
    /* 超出的 pic 溢出隐藏 */
    overflow: hidden;
}
.banner .pic {
    /* 绝对定位元素 水平居中 让大盒子设置居中 内部的所有子元素都跟着一起移动 */
    /* 大盒子宽度设置为图片宽度 1920px */
    width: 1920px;
    height: 665px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
}
.banner .pic ul li {
    /* 呼吸轮播图 所有图片摞在一起 */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1920px;
    height: 665px;
    /* 绝对定位后面的压盖住前面的 */
    display: none;
}
.banner .pic ul li:first-child {
    /* 默认显示第一张图片 */
    display: block;
}
.banner .inner .circles {
    position: absolute;
    width: 15px;
    height: 270px;
    /* 渲染小棍 */
    background: url(../images/list_boxbg.png) repeat-y center top;
    z-index: 99;
    /* inner是circles的参考盒子 inner没有高度 不能使用bottom 只能使用top */
    left: 0px;
    top: 218px;
}
.banner .inner .circles ol li {
    /* 渲染小圆点 */
    width: 15px;
    height: 15px;
    background: url(../images/num_bg.png);
    /* 同级元素有间隔 */
    margin-bottom: 70px;
    position: relative;
}
.banner .inner .circles ol li a {
    /* 调整位置 */
    width: 104px;
    height: 43px;
    background: url(../images/num_hover.png);
    position: absolute;
    left: -76px;
    top: -12px;
    display: none;
}
.banner .inner .circles ol li:nth-child(2) a {
    background: url(../images/num_hover2.png);
}
.banner .inner .circles ol li:nth-child(3) a {
    background: url(../images/num_hover3.png);
}
.banner .inner .circles ol li:last-child(4) a {
    background: url(../images/num_hover4.png);
}
.banner .inner .circles ol li.cur a {
    /* 指定元素显示小图标 */
    display: block;
}

15.3 jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $imgs = $("#imgs ul li");
    var $circles = $("#circles ol li");
    var $banner = $("#banner");

    // 定义length
    var length = $circles.length;
    // 定义信号量
    var idx = 0;
    // 定义定时器
    var timer = setInterval(rightBtn,2000);
    // 鼠标移入 清除定时器
    $banner.mouseenter(function(){
        clearInterval(timer);
    });
    // 鼠标离开 重新开启定时器
    $banner.mouseleave(function () {
        // 设表先关
        clearInterval(timer);
        // 重新赋值timer
        timer = setInterval(rightBtn,2000);
    });
    // 定义函数 书写右按钮事件 同时可用于复用
    function rightBtn(){
        // 防流氓 左右按钮防流氓 用 .is(":animated")方法
        // 当图片运动的时候，什么也不做
        if($imgs.is(":animated")){
            return;
        }
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(600);
        // 信号量改变
        idx++;
        // 边界判定
        if(idx > length -1){
            idx = 0;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(600);
        // 当前小圆点加cur 其它去cur
        $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
    }
    // 小圆点事件 防流氓 stop(true)
    $circles.mouseenter(function(){
        // 当前图片消失
        $imgs.eq(idx).stop(true).fadeOut(600);
        // 信号量改变
        idx = $(this).index();
        // 下一张图片淡入
        $imgs.eq(idx).stop(true).fadeIn(600);
        // 小圆点加cur
        $(this).addClass("cur").siblings().removeClass("cur");
    });
</script>
相关文章
点击查看

本文标题:十五、案例：安徽龙禧（banner轮播图）

文章作者:Mango

发布时间:2020年07月08日 - 22:20:00

最后更新:2020年07月08日 - 22:35:39

原始链接:https://mango185.github.io/post/bf12a2c6.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️