bootstrap图片轮播组件使用实例解析_javascript技巧

《bootstrap图片轮播组件使用实例解析_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Bootstrap图片轮播组件使用实例解析使用Bootstrap來编写图片轮播组件Carousel，则能够节约很多时间，图片轮播组件是一个在网页中很常见的技术，但是如果直接编写的话，需耍很长的JavaScript编码，同时也不好控制大小。同时说一下，Carousel这个词的本义是回旋木马。一、基本目标在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果，并口在每张图片下面配有图片说明。出于笔者的电脑视频录制软件比较渣，也觉得没必要画太多吋间在这上面，觉得只要能说明问题就行，所以卜•面的GIF失色比较严重，但是基木的效

2、果还算是展小出来了。这个Bootstrap的图片轮播组件Carousel,不兼容IE6与7,需要IE6支持的话,要去这个网站中下载Bootstrap的IE6组件支持（点击打开链接）。同吋，在GoogleChrome中图片文件说明会渗有一点小黑色，不过不影响浏览：图片轮播Carousel在不同浏览器小的展示情况是不同的。IE8的话是这样的效果:图片轮播Carousel二、基本思想见下图网页布局:图片轮播Carousel"曲三、制作过程1、同Z前紐ootstrap编写一个在当前网页弹出可关闭的对话框非弹窗》的第一步（点击打开链接）因为需要

3、使用Bootstrap,所以先在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本，Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3o本文也是根据Bootstrap3制作。同时，Bootstrap3所提供的JavaScript效果需要到jQueryl.11（点击打开链接）支持,可以到jQuery官网中下载兼容旧浏览器TE6的jQueryl.11,而不是不兼容旧浏览器TE6的JQuery2o下载完之后，配置好站点目录。把Bootstrap3直接解压到站点目录，而把jqucry-1.11

4、.1.js放到js目录,也就是与bootstrap,js同一目录,站点文件夹的结构大致如下：fonts均bootstrapjsimages它bootstrap.minjsJijs均jquery-l.ll.ljsBootstrapTest2014/6/269:142014/6/269:142014/10/2915:41JScriptScript文件JScriptScript文件JScriptScript文件2、以下是网页的全代码，下而一部分一部分进行说明:

5、ansitional//EN，z〃http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6、o〃>〈linkhref二〃css/bootstrap.css〃rel二〃stylesheet"media二〃screen〃>〈/script>

7、der"〉图片轮播Carousel