图片根据屏幕大小切换自适应

根据不同屏幕宽度取不同大小的图片

1. 拿到屏幕的宽度
2. 与一个值比较，判断是不大屏还是小屏
3. 拿到对象，给对象挷定数据 ps html属性 data-xxx- 可以存储数据 三目运算：可根据比较值取不同数据
4. 监听屏幕宽度的方法

 function resize() {
    // 获取屏幕宽度
    var windowWidth = $(window).width();
    // 判断屏幕属于大还是小
    var isSmallScreen = windowWidth < 768;
    // 根据大小为界面上的每一张轮播图设置背景
    // $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组（多个元素）
    $('#main_ad > .carousel-inner > .item').each(function(i, item) {
      // 因为拿到是DOM对象 需要转换
      var $item = $(item);
      var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg')
      // jQuery方式
      // $element.data()
      // 是一个函数 ，专门用于取元素上的自定义属性（data-abc）
      // 函数的参数是我们要取得属性名称（abc）
      // $element.attr('data-abc')
      // JS中的写法
      // element.dataset['abc']
      // element.getAttribute('data-abc')
      // element.setAttribute('data-abc','')

      // 设置背景图片
      $item.css('backgroundImage', 'url("' + imgSrc + '")');
      //
      // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
      if (isSmallScreen) {
        $item.html('![](' + imgSrc + ')');
      } else {
        $item.empty();
      }
    });
  }
  // $(window).on('resize', resize);
  // // 让window对象立即触发一下resize
  // $(window).trigger('resize');
  $(window).on('resize', resize).trigger('resize');
});