ch08-轮播插件的课件.ppt

第8章轮播插件轮播插件教学内容轮播插件一、定义：轮播插件就是将几张同等大小的大图，按照顺序依次播放。知识点概述Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。轮播的内容可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容，使用该插件时必须引入bootstrap.js或压缩版的bootstrap.min.js。基本轮播图轮播图的实现主要由三个部分构成：轮播的图片轮播图片的计数器轮播图片的控制器。设计轮播容器divid=slidershowclass=carousel .../div使用.carousel类设计轮播图片的容器，并为该容器添加id，方便后面的使用，示例代码如下所示。在轮播容器div.carousel的内部添加轮播计算器.carousel-indicators类，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有序列表来制作，该内容放在轮播容器内，示例代码如下所示。设计轮播计数器!--设置图片轮播的顺序--?olclass=carousel-indicators? liclass=active1/li? li2/li? li3/li? li4/li? li5/li/ol在Carousel中通过.carousel-control类配合left和right来实现轮播控制器。其中left表示向前播放，right表示向后播放。该内容同样放在carousel轮播容器内，示例代码如下所示。设计轮播图片控制器!--设置轮播图片控制器--?aclass=leftcarousel-controlhref=? spanclass=glyphiconglyphicon-chevron-left/span?/a?aclass=rightcarousel-controlhref=? spanclass=glyphiconglyphicon-chevron-right/span?/aBootstrap中可以使用div标签添加.carousel-caption类为图片添加描述信息，这部分内容只需要在div.item中图片底部添加对应的代码，示例代码如下所示。添加图片描述!--图片对应标题和描述内容--?divclass=carousel-caption? h3图片标题/h3? p描述内容.../p?/div基本实例!--轮播图开始--divid=ceclass=carouselslidedata-ride=carousel !--Indicators-- olclass=carousel-indicators lidata-target=#cedata-slide-to=0class=active/li lidata-target=#cedata-slide-to=1/li lidata-target=#cedata-slide-to=2/li /ol !--Wrapperforslides-- divclass=carousel-innerrole=listbox divclass=itemactive imgsrc=images/ban01.jpgalt=... divclass=carousel-caption ... /div /div1.基本实例 divclass=item imgsrc=images/ban02.jpgalt=... divclass=carousel-caption ... /div/div divclass=item imgsrc=images/ban03.jpgalt=... divclass=carousel-caption ... /div /div/div !--Controls-- aclass=leftcarousel-controlhref=#cerole=buttondata-slide=prev spanclass=glyphiconglyphicon-chevron-leftaria-hidden=true/span spanclass=sr-onlyPrevious/span /a aclass=rightcarousel-controlhref=#cerole=button