Bootstrap轮播图的响应式切换（JS实时加载资源）

需求：

根据窗口尺寸，在宽度>640时加载大图，在宽度<=640时加载小图。

需求呈现

步骤：

1. 在HTML的div.item标签中，将大图和小图的src写入自定义属性data-；
2. 监听window窗口的resize事件；
3. 用jQuery的each方法，对div.item取data-的值，赋到item的html中；
4. 取值用jQuery对象的.data()方法，赋值用jQuery对象的.html()方法；
5. 函数写完后调用一次，用事件的jQuery方法.trigger();
   用到的理论：遍历$元素.each()、标签的自定义属性data-与dataset、调用事件扳机trigger
   
   

$对象的each方法（jQuery）

作用：

用于遍历$jQuery对象，对这些元素进行批量的操作。

语法：

$items.each(function(index, element){})

说明：

在这个each方法中：

• 函数的第一个参数，即index在函数运算中取值为$items[index]的索引值
• 函数的第二个参数，即element在函数运算中取值为$items[index]即这个DOM对象
• 所以$(element)为$items中的逐个DOM转jQuery对象（可以使用jQuery方法）
• 在函数中return false; 将停止each循环。

W3school说明：

jQuery 遍历 - each() 方法

自定义属性data-*

用途：

存储DOM元素的属性，方便JS操作。如长串的图片名、普通文字字符串等。
提高代码的可维护性，在JS操作时避免拼接。

在 HTML中写入元素的自定义属性名

自定义属性名中可以用“-”套多层，如“data-item-src”。每个单词都不能用大写。
<tagName class=’类名’ data-属性名 = ”值”;></tagName>

原生JS取值

• 元素的dataset是一个键值对数组，是当前元素里自定义属性的集合，属性名是键。
• 取值时，就是在dataset中用属性名做键取值，属性名需要用驼峰连写，中间不能用“-”
  var 值 = DOMobj.dataset[“属性名”];

用jQuery取值

• 在jQuery中，$对象的.data()就可以取到
  取值时，属性名可以用-，也可以用驼峰
  var 值 = $(obj).data(“属性名”);
  博客园链接：HTML5 data-* 自定义属性
  
  

自定义属性组dataset与类名组classList的区别

类名组classList是类名的结合（H5中），用来操作元素上所有的类名（className）；

classList的方法

• 增加类名 DOMobj.add(‘类名’);
• 删除类名 DOMobj.remove(‘类名’);
• 判断类名 DOMobj.contains(‘类名’);
• 替换：有就加，没有就不加 DOMobj.toggle(‘类名’);

类名与自定义属性的层级不同

• 自定义属性dataset中的每个自定义属性data-*=””在HTML中与class=””平级，写在行内；
  
  

事件的trigger方法（jQuery）

• 放在事件注册的末尾，表示注册后立即发生一次该事件；
• 语法：
  $(obj).on(“事件类型”, function(){ 函数体; }).trigger(“事件类型”);

代码实现

HTML中

大图用background-imge，小图用<a><img></a>但因为a是动态生成的，所以不能存值。值存在div.item里

<div class="carousel-inner" role="listbox">
<!-- 轮播图的图片都写在a中，大图用background-imge，小图用<a><img></a>但因为a是动态生成的，所以不能存值。值存在div.item里 -->
<div class="item active" data-large-item="./img/slide_01_2000x410.jpg" data-small-item="./img/slide_01_640x340.jpg"></div>
<div class="item" data-large-item="./img/slide_02_2000x410.jpg" data-small-item="./img/slide_02_640x340.jpg"></div>
<div class="item" data-large-item="./img/slide_03_2000x410.jpg" data-small-item="./img/slide_03_640x340.jpg"></div>
<div class="item" data-large-item="./img/slide_04_2000x410.jpg" data-small-item="./img/slide_04_640x340.jpg"></div>
</div>

JS中

1. 监听window窗口的resize事件；
2. 用jQuery的each方法，对div.item取data-的值，赋到item的html中；
3. 取值用jQuery对象的.data()方法，赋值用jQuery对象的.html()方法；
4. 函数写完后调用一次，用事件的jQuery方法.trigger();
   用到的理论：遍历$元素.each()、标签的自定义属性data-与dataset、调用事件扳机trigger

$(function(){
$(window).on("resize",function(){     // 监听屏幕事件
    var windowWidth=$(window).width();     //获取屏幕尺寸
    console.log(windowWidth);
    // var $slideItem = $(".carousel-inner .item");  //需要赋值的元素：div.item
    if(windowWidth<=640){     // 屏幕尺寸判断：xs屏
        $(".carousel-inner .item").each(function(index, element){
            console.log($(element).data());
            //获取小图的src值，用html()方法写div.item>a
            $(element).html('<a href="#" class="smallPic"><img src="'+$(element).data()["smallItem"]+'"></a>');
        });
    }else{     // 尺寸判断：除了xs屏
        $(".carousel-inner .item").each(function(index, element){
            console.log($(element).data());
            // 获取大图和小图的src值，用html()方法写div.item>a
            $(element).html('<a href="#" class="largePic" style="background-image:url('+$(element).data()["largeItem"]+');"></a>');
        });
    }
}).trigger("resize");   //扳机触发事件

//入口函数末尾
})

---

2018.1.21