美文网首页
Bootstrap轮播图的响应式切换(JS实时加载资源)

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

作者: 英俊又可爱XD | 来源:发表于2018-01-21 10:32 被阅读0次
需求:

根据窗口尺寸,在宽度>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

相关文章

  • Bootstrap轮播图的响应式切换(JS实时加载资源)

    需求: 根据窗口尺寸,在宽度>640时加载大图,在宽度<=640时加载小图。 步骤: 在HTML的div.item...

  • 2018-07-30

    Jquery和纯JS实现轮播图(一)--左右切换式 一、页面结构 对于左右切换式的轮播图的结构主要分为以下几个部分...

  • Day11--Bootstrap

    Bootstrap 响应式布局 CSS样式和JS插件

  • Bootstrap

    Bootstrap: 响应式布局 CSS样式和JS插件 案例

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 股票K线图,折线图总结(echarts)

    此处利用bootstrap+echarts画布配置参数实现响应式,并且利用socket实时通信实现数据的实时更新 ...

  • web 5.BootStrap框架

    今日内容 Bootstrap: 响应式布局 CSS样式和JS插件 案例

  • 11.BootStrap

    主要内容 Bootstrap: 响应式布局 CSS样式和JS插件 案例

  • Bootstrap 学习

    Bootstrap 可以帮助我们做出响应式网站 一些资源 Bootstrap official site Boot...

  • 插件与组件

    Bootstrap简述 Bootstrap是一个HTML、CSS、JS框架,用于开发响应式布局、移动设备优先的WE...

网友评论

      本文标题:Bootstrap轮播图的响应式切换(JS实时加载资源)

      本文链接:https://www.haomeiwen.com/subject/ofsfaxtx.html