这个效果的图片轮播挺普遍的，推荐个插件swiper.js，当然网上很多这类型的插件，或者你可以自己写一个，网上教程也挺多的，这里就不罗嗦了，思路不明可以问。
补充个案例：（下面代码复制过去就能用了，文中有两个地方要引入文件，由于百度不给发链接，所以自行下载替换吧）
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative
height: 100%
}
body {
background: #eee
font-family: Helvetica Neue, Helvetica, Arial, sans-serif
font-size: 14px
color:#000
margin: 0
padding: 0
}
.swiper-container {
width: 100%
height: 100%
}
.swiper-slide {
text-align: center
font-size: 18px
background: #fff
/* Center slide text vertically */
display: -webkit-box
display: -ms-flexbox
display: -webkit-flex
display: flex
-webkit-box-pack: center
-ms-flex-pack: center
-webkit-justify-content: center
justify-content: center
-webkit-box-align: center
-ms-flex-align: center
-webkit-align-items: center
align-items: center
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30
})
</script>
</body>
</html>
1、在电脑桌面空白处单击右键，新建一个记事本并打开
2、在新建文件中输入如下代码。 html语言都是以<html><head><title><body>等标签开始，以</html></head></title></body>标签作为结束。
3、接下来要在<title></title>标签中间输入标题（如个人网页）在<body></body>中输入“自己做的第一个网页，厉害吧！”完成后点击保存。并将记事本后缀名.txt改为.html格式
4、将记事本重命名为.html格式后，出现如下格式。
5、双击打开此文件就会出现浏览器网页效果了。
扩展资料：
前端和后端的区别：
1、展示方式
前端指的是用户可见的界面，网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并配合后端做网页的数据显示和交互等可视方面的工作内容。
后端是指用户看不见的东西，通常是与前端工程师进行数据交互及网站数据的保存和读取，相对来说后端涉及到的逻辑代码比前端要多，后端考虑的是底层业务逻辑的实现，平台的稳定性与性能等。
2、所用技术
前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack、AngularJs、ReactJs、VueJs等技术。
后端开发以java为例，主要用到的包括但不限于Struts、spring、springmvc、Hibernate Http协议、Servlet、Tomcat服务器等技术。
3、工作职责
前端工程师主要的工作职责分为三大部分，分别是传统的Web前端开发，移动端开发和大数据呈现端开发。
后端工程师的主要职责也集中在三大部分，分别是平台设计、接口设计和功能实现。
4、知识结构
在知识结构方面，前端开发涉及到的内容包括Html、CSS、JavaScript、Android开发（采用Java或者kotlin）、iOS开发（采用OC或者Swift）、各种小程序开发技术（类Html），随着前端开发任务的不断拓展，前端开发后端化也是一个较为明显的趋势。
后端开发的重点在于算法设计、数据结构、性能优化等方面，在具体的功能实现部分可以采用Java、Python或者PHP等编程语言来实现。
数字故宫的网址是 http://www.dpm.org.cn/index1024768.html故宫博物院，是一座特殊的博物馆。
成立于1925年的故宫博物院，建立在明清两朝皇宫——紫禁城的基础上。历经五百年兴衰荣辱，帝王宫殿的大门终于向公众敞开。
故宫博物院绝无仅有的独特藏品，是世界上规模最大、保存最完整的紫禁城木结构宫殿建筑群。它是中华民族的骄傲所在，也是全人类的珍贵文化遗产。如今，昔日皇宫禁地那占地78万平方米的重重宫阙，既是收藏明清皇室珍宝的巨大宝库，也是记载明清宫廷历史的鲜活档案……因此，故宫博物院的生命线，就依附在紫禁城宫殿中，顺着它的文化脉络生长、延伸……
走进故宫博物院，您沿中轴线前行，从起伏跌宕的建筑乐章中可以感受盛世皇朝的博大胸怀；可以透过东西六宫精巧的陈设和内廷园囿雅致的格局，捕捉宫廷生活的温婉气息；可以从养心殿东暖阁卷起的黄纱帘中，追溯百年前中华民族内忧外患的历史沧桑……
然而，这并不是故宫博物院的全部。
走过80个春秋的故宫博物院，不仅一如既往精心保管着明清时代遗留下来的皇家宫殿和旧藏珍宝，而且通过国家调拨、向社会征集和接受私人捐赠等方式，极大地丰富了文物藏品，形成古书画、古器物、宫廷文物、书籍档案等领域蔚成系列、总数超过180万件的珍贵馆藏。漫步在故宫博物院的常设文物专馆，或者欣赏频繁推出的专题文物展览，让您可以更完整地了解中华民族工艺美术的伟大成就。
步入新世纪以来，故宫博物院开展了历史上规模最大的古建维修工程，在让古老的紫禁城焕发新生的同时，也向您生动地展示着弥足珍贵的传统建筑工艺。
当前，故宫博物院的研究人员正在对古建筑、院藏文物、宫廷历史文化遗存、明清档案、清宫典籍和近80年的故宫博物院历程进行着更为深入细致的研究。建立起完整的“故宫学”体系，意在向您揭示紫禁城中蕴涵的博大精深的中华民族智慧和文化精神。
曾经，受经济条件和技术手段的限制，故宫博物院和昔日殿宇重重的帝王宫殿一样，似乎总是蒙着神秘的面纱。但是，近10年来，步入信息化时代的故宫博物院，利用最先进的数字化技术和设备，在虚拟的时空中建立起一座和紫禁城同样辉煌的“数字故宫”。将紫禁城里取之不尽的文化资源奉献给远方的观众朋友，已经不再是遥远的梦想……
我们希望通过开启故宫博物院网站这个与您互动的窗口，构建一个促进“故宫学”的发展的平台，欢迎您关注、监督并共同推进故宫博物院的发展……
故宫博物院正以越来越开放的姿态，邀请您走进这片曾经神秘的领地，走进中华传统文化的圣殿。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）