首页-轮播图 |学习笔记

简介: 快速学习 首页-轮播图

开发者学堂课程【移动 Web 前端开发:首页-轮播图 】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8406


首页-轮播图


轮播图

在 index 中导入所需轮播图片,

<!-轮播图-->

<div class=" sn_ banner">

<ul>

<li><a href="#"><img src="images/bannere1.jpg" alt=""/></a></1i>

<li><a href="#"><img src=" images/banner02.jpg" alt="*/></a></1i>

……//连续导入其他图片

</ul>

<ul>

<li class="now"></li>

<li></li>

<li></li>

……

</ul>

最终代码效果如下,

image.png

相关文章
|
存储 前端开发 JavaScript
ElementUI之首页导航与左侧菜单
ElementUI之首页导航与左侧菜单
75 0
轮播图片上添加描述
在轮播图片中添加描述,通过在每个`&lt;div class=&quot;carousel-item&quot;&gt;`内加入`&lt;div class=&quot;carousel-caption&quot;&gt;`来设置图片描述。示例展示了如何为轮播图添加标题和内容,并介绍了相关类的作用,如`.carousel`创建轮播、`.carousel-indicators`添加指示符等,实现图片的切换及动画效果。
轮播图片上添加描述
|
3月前
“节流阀“ 在轮播图的使用
“节流阀“ 在轮播图的使用
32 1
|
7月前
|
JSON 前端开发 JavaScript
8.ElementUI之首页导航+左侧菜单
8.ElementUI之首页导航+左侧菜单
55 0
|
JSON 前端开发 测试技术
ElementUI之首页导航+左侧菜单
ElementUI之首页导航+左侧菜单
92 0
|
前端开发
HTML+CSS实现轮播图效果
HTML+CSS实现轮播图效果
|
前端开发
关于ElementUI之首页导航与左侧菜单实现
关于ElementUI之首页导航与左侧菜单实现
114 0
|
前端开发 开发者
首页-导航条 |学习笔记
快速学习 首页-导航条
102 0
首页-导航条 |学习笔记
|
前端开发 开发者
轮播图-移动端|学习笔记
快速学习 轮播图-移动端
108 0
轮播图-移动端|学习笔记