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\”>
<img src=\”…\” alt=\”…\”>
<div class=\”carousel-caption\”>

</div>
</div>
<div class=\”item\”>
<img src=\”…\” alt=\”…\”>
<div class=\”carousel-caption\”>

</div>
</div>

</div>

<!– Controls –>
<a class=\”left carousel-control\” href=\”#carousel-example-generic\” role=\”button\” data-slide=\”prev\”>
<span class=\”glyphicon glyphicon-chevron-left\” aria-hidden=\”true\”></span>
<span class=\”sr-only\”>Previous</span>
</a>
<a class=\”right carousel-control\” href=\”#carousel-example-generic\” role=\”button\” data-slide=\”next\”>
<span class=\”glyphicon glyphicon-chevron-right\” aria-hidden=\”true\”></span>
<span class=\”sr-only\”>Next</span>
</a>
</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\”>
<img src=\”slide1.png\” alt=\”First slide\”>
</div>
<div class=\”item\”>
<img src=\”slide2.png\” alt=\”Second slide\”>
</div>
<div class=\”item\”>
<img src=\”slide3.png\” alt=\”Third slide\”>
</div>
</div>
<!– 轮播(Carousel)导航 –>
<a class=\”carousel-control left\” href=\”#myCarousel\”
data-slide=\”prev\”>&lsaquo;
</a>
<a class=\”carousel-control right\” href=\”#myCarousel\”
data-slide=\”next\”>&rsaquo;
</a>
</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\”>
<img src=\”slide1.png\” alt=\”First slide\”>
<div class=\”carousel-caption\”>标题 1</div>
</div>
<div class=\”item\”>
<img src=\”slide2.png\” alt=\”Second slide\”>
<div class=\”carousel-caption\”>标题 2</div>
</div>
<div class=\”item\”>
<img src=\”slide3.png\” alt=\”Third slide\”>
<div class=\”carousel-caption\”>标题 3</div>
</div>
</div>
<!– 轮播(Carousel)导航 –>
<a class=\”carousel-control left\” href=\”#myCarousel\”
data-slide=\”prev\”>&lsaquo;
</a>
<a class=\”carousel-control right\” href=\”#myCarousel\”
data-slide=\”next\”>&rsaquo;
</a>
</div>

文字标题可选择,可修改自己需要的。

内容参考:

http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

https://v3.bootcss.com/javascript/#carousel

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明】:本评测不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告

木沐主机评测 国外服务器主机评测 Bootstrap图片轮播/幻灯图片(Carousel)效果实例整理 https://www.mumupc.com/archives/11290.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

你的前景,远超我们想象