Bootstrap3制作图片轮播效果


Posted in Javascript onMay 12, 2016

先来看看Bootstrap图片轮播效果:

Bootstrap3制作图片轮播效果

上面就是为大家分享的效果,不过这是网易云音乐的首页。

这样的效果记得最先在ios7的官方控件库中出现之后安卓也在某个版本加入了这个view,设计是通用的啊..bootstrap3也支持在web中使用这样的效果。

接下来进行简单分析:

一 . 结构分析

一个轮播图片主要包括三个部分:

☑ 轮播的图片

☑ 轮播图片的计数器

☑ 轮播图片的控制器

第一步:设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 ID 值,方便后面采用 data 属性来声明触发。

<div id="slidershow" class="carousel"></div>

第二步:设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器,采用 carousel-indicators 样式,其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li),一般采用有顺列表来制作:
<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

第三步:设计轮播图片播放区。轮播图整个效果中,播放区是最关键的一个区域,这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制,而且其同样放置在 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>
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
 </div>
 </div>
</div> 

第四步:设置轮播图片描述.很多轮播图片效果,在每个图片上还对应有自己的标题和描述内容。其实 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>

第五步:设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 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>

二、实现过程

<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>

分为三个部分

1、指示器
一个部分是下面的小点..就是指示器

Bootstrap3制作图片轮播效果

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>

没啥悬念 就是每一个项目,填充图片 题目内容 就好

2、左右控制器
代码如下

<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的更多内容大家还可以参考专题进行学习: 《Bootstrap学习教程》

以上就是针对javascript图片轮播进行的详细介绍,希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
JS创建事件的三种方法(实例代码)
May 12 #Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
关于this和self的使用说明
2010/08/01 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python将图片转换为字符画的方法
2020/06/16 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python实现数据分析与建模
2019/07/11 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
自荐书范文
2013/12/08 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
文明礼仪倡议书
2015/04/28 职场文书
初中政教处工作总结
2015/08/12 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python