第124天：移动web端-Bootstrap轮播图插件使用

 1 <!-- 
 2   以下容器就是整个轮播图组件的整体，
 3   注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图
 4   bootstrap.js会自动为当前元素添加图片轮播的特效
 5 -->
 6 <div id="轮播图的ID" class="carousel slide" data-ride="carousel">
 7   <!-- ol标签是图片轮播的控制点 -->
 8   <ol class="carousel-indicators">
 9     <!-- 
10       每一个li就是一个单独的控制点
11         data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个
12         data-slide-to属性是指当前的li元素绑定的是第几个轮播项
13       注意，默认必须给其中某个li加上active，展示的时候就是焦点项目
14     -->
15     <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
16     <li data-target="#轮播图的ID" data-slide-to="1"></li>
17     <!-- ...更多的 -->
18   </ol>
19   <!-- 
20     .carousel-inner是所有轮播项的容器盒子，
21     注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义
22   -->
23   <div class="carousel-inner" role="listbox">
24     <!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 -->
25     <div class="item active">
26       <!-- 轮播项目中展示的图片 -->
27       <img src="example.jpg" alt="示例图片">
28       <div class="carousel-caption">
29         <!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption -->
30       </div>
31     </div>
32     <div class="item">
33       <!-- ... -->
34     </div>
35     <!-- ... -->
36   </div>
37   <!-- 图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张 -->
38   <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
39   <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反 -->
40   <a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev">
41     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
42     <span class="sr-only">上一张</span>
43   </a>
44   <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next">
45     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
46     <span class="sr-only">下一张</span>
47   </a>
48 </div>

 1 var windowWidth = $(window).width();  // 获取屏幕宽度
 2 var isSmallScreen = windowWidth < 768;  // 判断屏幕属于大还是小
 3 // 根据大小为界面上的每一张轮播图设置背景
 4 // $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素）
 5 $('#main_ad > .carousel-inner > .item').each(function(i, item) {
 6 var $item = $(item);// 因为拿到是DOM对象 需要转换
 7 // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
 8 var imgSrc =
 9 isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
10 
11 // 设置背景图片
12 $item.css('backgroundImage', 'url("' + imgSrc + '")');
13 });

1 function 窗口变化后执行的函数名(){
2   // 具体的操作
3 }
4 $(window).on('resize', 窗口变化后执行的函数名);
5 ```
6 
7 - 这个事件只会在窗口尺寸发生变化后执行，但是我们需要一开始时执行一次

trigger函数是让window对象立即出发一次

$(window).on('resize', 窗口变化后执行的函数名).trigger('resize');

1 // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
2 if (isSmallScreen) {
3   $item.html('<img src="' + imgSrc + '" alt="" />');
4 } else {
5   $item.empty();
6 }

 1 #main_ad > .carousel-inner > .item {
 2   background-repeat: no-repeat;
 3   background-position: center center;
 4   background-size: cover;
 5 }
 6 @media (min-width: 768px) {
 7   #main_ad > .carousel-inner > .item {
 8     height: 410px;
 9   }
10 }
11 #main_ad > .carousel-inner > .item > img {
12   width: 100%;
13 }

<div class="col-sm-6 col-md-4">
  <!-- ... -->
</div>

<a href="#">
  <div class="media">
    <div class="media-left">
      <i class="icon-uniE907"></i>
    </div>
    <div class="media-body">
      <h4 class="media-heading">支付交易保障</h4>
      <p>银联支付全称保证支付安全</p>
    </div>
  </div>
</a>