当前位置：首页 > 资讯 > 技术文档

Bootstrap3制作图片轮播效果

时间：2022-06-06 07:34 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap3制作图片轮播效果

先来看看Bootstrap图片轮播效果： [img]http://files.jb51.net/file_images/article/201605/201651294003764.jpg?201641294054[/img] 上面就是为大家分享的效果，不过这是网易云音乐的首页。这样的效果记得最先在ios7的官方控件库中出现之后安卓也在某个版本加入了这个view，设计是通用的啊..bootstrap3也支持在web中使用这样的效果。接下来进行简单分析： [b]一 . 结构分析[/b] 一个轮播图片主要包括三个部分：　　☑ 轮播的图片　　☑ 轮播图片的计数器　　☑ 轮播图片的控制器 [b]第一步：[/b]设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。

[url=##]

[b]第四步:[/b]设置轮播图片描述.很多轮播图片效果，在每个图片上还对应有自己的标题和描述内容。其实 Bootstrap 框架中的 Carousel 也提供类似的效果。只需要在 item 中图片底部添加对应的代码.

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3>图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

[b]第五步：[/b]设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内：

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

[b]二、实现过程[/b]

<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"></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"></span>
 <span class="sr-only">Next</span>
 </a>
</div>

分为三个部分 [b]1、指示器[/b] 一个部分是下面的小点..就是指示器 [img]http://files.jb51.net/file_images/article/201605/201651294538855.png?201641294555[/img] ol class="carousel-indicators"类用于创建这个指示器每个里data-slide-to="0" 属性用于指引位置 class="active" 定义默认激活状态 item

<div class="item">
 <img src="..." alt="...">
 <div class="carousel-caption">
 <h3>...</h3>
 <p>...</p>
 </div>
</div>

没啥悬念就是每一个项目，填充图片[b]题目[/b] 和[b]内容[/b] 就好 [b]2、左右控制器[/b] 代码如下

 <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>

在javascript中操作初始化

$('.carousel').carousel({
 interval: 2000
})

进行循环 .carousel('cycle') 暂停 .carousel('pause') 定位到具体某一个item 从0开始 .carousel(number) 前一个 .carousel('prev') 下一个 .carousel('next') 关于Bootstrap的更多内容大家还可以参考专题进行学习： [b]《Bootstrap学习教程》[/b][/url] 以上就是针对javascript图片轮播进行的详细介绍，希望本文对大家学习javascript程序设计有所帮助。

全部评论(0)

上一篇：JavaScript原生对象之Number对象的属性和方法详解
下一篇：javascript实现table单元格点击展开隐藏效果(实例代码)

资讯排行榜
更多>>