根据不同屏幕宽度取不同大小的图片
- 拿到屏幕的宽度
- 与一个值比较，判断是不大屏还是小屏
- 拿到对象，给对象挷定数据 ps html属性 data-xxx- 可以存储数据 三目运算：可根据比较值取不同数据
- 监听屏幕宽度的方法
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('');
} else {
$item.empty();
}
});
}
// $(window).on('resize', resize);
// // 让window对象立即触发一下resize
// $(window).trigger('resize');
$(window).on('resize', resize).trigger('resize');
});
