这个效果的图片轮播挺普遍的，推荐个插件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>
数字故宫的网址是 http://www.dpm.org.cn/index1024768.html故宫博物院，是一座特殊的博物馆。
成立于1925年的故宫博物院，建立在明清两朝皇宫——紫禁城的基础上。历经五百年兴衰荣辱，帝王宫殿的大门终于向公众敞开。
故宫博物院绝无仅有的独特藏品，是世界上规模最大、保存最完整的紫禁城木结构宫殿建筑群。它是中华民族的骄傲所在，也是全人类的珍贵文化遗产。如今，昔日皇宫禁地那占地78万平方米的重重宫阙，既是收藏明清皇室珍宝的巨大宝库，也是记载明清宫廷历史的鲜活档案……因此，故宫博物院的生命线，就依附在紫禁城宫殿中，顺着它的文化脉络生长、延伸……
走进故宫博物院，您沿中轴线前行，从起伏跌宕的建筑乐章中可以感受盛世皇朝的博大胸怀；可以透过东西六宫精巧的陈设和内廷园囿雅致的格局，捕捉宫廷生活的温婉气息；可以从养心殿东暖阁卷起的黄纱帘中，追溯百年前中华民族内忧外患的历史沧桑……
然而，这并不是故宫博物院的全部。
走过80个春秋的故宫博物院，不仅一如既往精心保管着明清时代遗留下来的皇家宫殿和旧藏珍宝，而且通过国家调拨、向社会征集和接受私人捐赠等方式，极大地丰富了文物藏品，形成古书画、古器物、宫廷文物、书籍档案等领域蔚成系列、总数超过180万件的珍贵馆藏。漫步在故宫博物院的常设文物专馆，或者欣赏频繁推出的专题文物展览，让您可以更完整地了解中华民族工艺美术的伟大成就。
步入新世纪以来，故宫博物院开展了历史上规模最大的古建维修工程，在让古老的紫禁城焕发新生的同时，也向您生动地展示着弥足珍贵的传统建筑工艺。
当前，故宫博物院的研究人员正在对古建筑、院藏文物、宫廷历史文化遗存、明清档案、清宫典籍和近80年的故宫博物院历程进行着更为深入细致的研究。建立起完整的“故宫学”体系，意在向您揭示紫禁城中蕴涵的博大精深的中华民族智慧和文化精神。
曾经，受经济条件和技术手段的限制，故宫博物院和昔日殿宇重重的帝王宫殿一样，似乎总是蒙着神秘的面纱。但是，近10年来，步入信息化时代的故宫博物院，利用最先进的数字化技术和设备，在虚拟的时空中建立起一座和紫禁城同样辉煌的“数字故宫”。将紫禁城里取之不尽的文化资源奉献给远方的观众朋友，已经不再是遥远的梦想……
我们希望通过开启故宫博物院网站这个与您互动的窗口，构建一个促进“故宫学”的发展的平台，欢迎您关注、监督并共同推进故宫博物院的发展……
故宫博物院正以越来越开放的姿态，邀请您走进这片曾经神秘的领地，走进中华传统文化的圣殿。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）