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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 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微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
详解Vue 换肤方案验证
2019/08/28 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python描述器descriptor详解
2015/02/03 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python制作词云的方法
2018/01/03 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python适合做数据挖掘吗
2020/06/16 Python
python怎么自定义捕获错误
2020/06/29 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
Java基础面试题
2012/11/02 面试题
毕业自我鉴定
2013/11/05 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
大学学习生活感言
2014/01/18 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
银行实习推荐信
2015/03/27 职场文书
肖申克救赎观后感
2015/06/02 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL