开发笔记

工作原理

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。

在支持 Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。

准备环节

准备轮播需要的图片，大于等于两张。

准备bootstrap的css和js以及jquery1.10+的js文件文件，这个网上一搜一大堆，也可以去官网下载。

将下载的css文件放入项目的css目录内，js文件放如js目录内，以及图片放在img(专放图片)的文件夹内。

在html中写代码，代码：
轮播代码：

<!--轮播图-->
		<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>
			  </ol>
			
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">

			      	<img src="{% static 'images/carousel1.jpg' %}" alt="..." >
				      <div class="carousel-caption">
				      </div>
			    </div>
			    <div class="item">
			      <img src="{% static 'images/carousel2.jpg' %}" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			</div>

实现滚动的方法

通过JavaScript
通过下面方法使用JS控制轮播(实现自动滚动)：

$('.carousel').carousel()

interval number 5000 自动循环项目之间的延迟时间（即滚动时间），如果为false，则整个轮播组件不会自动滚动（仅支持手动滚动）-在调试CSS样式时这很实用。
keyboard boolean true 是否应对键盘事件作出反应，如果选择true则可以通过键盘上的左<-右->方向键进行切换控制。
pause string | boolean “hover”
如果设置为"hover", 则鼠标移在动画屏幕上暂停旋转，并在移开鼠标后恢复旋转事件（这是默认属性）；如设置为false,则鼠标移上去轮播动画不会暂停。

在触摸屏幕上，当设置为"hover"属性时，循环将在触控时暂停（一旦用户完成与旋转事件的交互）两个时间间隔自动恢复。 请注意，这是上述鼠标行为的补充。

解释

ride string false 在用户手动循环第一个项目后自动播放传送带， 如果“carousel”则加载时自动播放传送带。
wrap boolean true 转盘是否应该连续循环或难以停止。
.carousel(‘cycle’)
从左到右循环播放。

.carousel(‘pause’)
通过事件停止幻灯片播放。

.carousel(number)
将轮播循环到特定的帧（基于0，类似数组），在 目标被显示之前回传给调用用者 (即 slid.bs.carousel 事件之前)。

.carousel(‘prev’)
将轮播指向前一帧幻灯片，在前一个目标被显示之前回传给调用者 (即 slid.bs.carousel 事件之前)。

.carousel(‘next’)
将轮播指向后一帧幻灯片，在前一个目标被显示之前回传给调用者 (即 slid.bs.carousel 事件之前)。

.carousel(‘dispose’)
销毁一个轮播的控件。

展示成果