背景:大三暑假实训,和小组同学一起做类似天猫商城的项目,我负责做页面美工。今天大部分的时间都在做图片轮播这一个功能点,有了几点心得,在这里总结一下。
首先,我记得以前看过bootstrap有轮播插件,就去W3C上面找,很快找到了。
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 轮播(Carousel)插件的标题</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a></div> </body></html>
这就只有轮播的样子了,但这种轮播需要人手动点击,才会更换图片。我希望它可以自己播放。接下来我看到它的另外一个实例。这个实例介绍了插件与JavaScript结合的用法。这样可以实现图片轮播。
但是,因为这是设置好的效果,图片更换时间为5秒钟。5秒钟,感觉有点长。我想要自己设置它的轮播时间。
然后我看到它的使用方法。
-
通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
-
属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
-
使用 data-slide-to 来向轮播床底一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。
-
data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
-
通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示:
$('.carousel').carousel()
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
选项名称 类型/默认值 Data 属性名称 描述 interval number
默认值:5000data-interval 自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。 pause string
默认值:"hover"data-pause 鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。 wrap boolean
默认值:truedata-wrap 轮播是否连续循环。 -
下面是一些轮播(Carousel)插件中有用的方法:
方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目。 $('#identifier').carousel({ interval: 2000})
.carousel('cycle') 从左到右循环轮播项目。 $('#identifier').carousel('cycle')
.carousel('pause') 停止轮播循环项目。 $('#identifier')..carousel('pause')
.carousel(number) 循环轮播到某个特定的帧(从 0 开始计数,与数组类似)。 $('#identifier').carousel(number)
.carousel('prev') 循环轮播到上一个项目。 $('#identifier').carousel('prev')
.carousel('next') 循环轮播到下一个项目。 $('#identifier').carousel('next')
控制轮播的方法:
一、通过按钮控制
<input type="button" class="btn start-slide" value="Start">
<script>
$(function(){
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
</script>
二、通过属性控制
<div class="item" data-interval="1000">
<img src="images/clothes/${j+1 }/01.jpg" style="width:100%;height:600px" class="img-responsive img-thumbnail"/>