Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理

如果按照从前需要在网站上加上幻灯片、图片轮播效果,早年老蒋做企业网站的时候是使用的Flash焦点图,后来用jquery幻灯片,虽然手边平时都积累备用几款常用的效果,毕竟这类的实例代码网上很多。但是,如果我们有使用Bootstrap框架那就更简单了,因为脚本框架中内置Carousel可以快速实现。
当然了,这里不能说jquery幻灯片效果不好,如果我们需要使用丰富复杂的还是需要自定义功能的,而默认的Bootstrap自带的也是简单的幻灯图片轮播效果而已。如果我们对于入门级简单需要实现的功能,可以直接参考内置默认的效果,这里整理两个Carousel简单的效果。
第一、官方文档自带的

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
<div class="carousel-caption">
...
</div>
</div>
...
</div> <!-- Controls -->

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>


<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

</div>

第二、runoob无文字描述

<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
</div>
<div class="item">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
</div>
<div class="item">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
</div>
</div>
<!-- 轮播(Carousel)导航 -->
data-slide="prev">‹

data-slide="next">›

</div>

图片需要自己定义,且CSS样式可以自己定义。
第三、有文字描述版

<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
data-slide="prev">‹

data-slide="next">›

</div>

文字标题可选择,可修改自己需要的。
内容参考:
http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
https://v3.bootcss.com/javascript/#carousel

赞 (0)
您的大名:
万水千山总是情,给个打赏行不行。 打赏

评论区

发表评论

42+16=?

暂无评论,要不来一发?

回到顶部