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

Bootstrap JS插件使用

> 对于BootstrapJS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

Bootstrap中轮播图插件叫作Carousel

一、基本的轮播图实现

HTML代码

 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、由于轮播图片超宽造成的影响

  - 美工为了在不同屏幕下更好地展示将图片两边做的非常宽,但是我们大多数情况的页面宽度都无法满足这样的图片宽度   - 而且Bootstrap的样式中默认将图片的max-width设置为100%;   - 造成界面图片缩放   - 想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示   + 两种办法:   (1) 换用背景图的方式,background-position: center center;   (2)使img元素绝对定位,left:50%,margin-left: -width/2

2、background使用

  - 将容器的高度固定(410px)   - 将轮播图改为背景显示   - 由于可能图片的高度不一定是410px   - 所以需要设置css3中的background-size

3、background-size

  (1)length   + 如 background-size: 100px 100px,将背景图固定到多大尺寸   - percentage   + 如 background-size: 90% 90%,以百分比的形式设置背景大小 (2)cover     + 1.背景图片等比例缩放     + 2.让背景图相对较小边放大到目标容器大小结束     * 如:一张100\*200的背景图放到一个300\*400的盒子中,最终背景图片的大小是300\*600     * 因为背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300\*600 (3) contain     + 1.背景图片等比例缩放     + 2.让背景图相对较大边放大到目标容器大小结束     * 如:一张100\*200的背景图放到一个300\*400的盒子中,最终背景图片的大小是200\*400     * 因为背景图的较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200\*400

4、图片响应式

(1)目的   + 各种终端都需要正常显示图片   + 移动端应该使用更小(体积)的图片 (2)实现方式     + 将元素中直接设置的图片背景删除,换成两个data-属性(如:data-img-sm="小图路径",data-img-lg="大图路径")     + 通过JS的方式获取屏幕的宽度;     + 判断屏幕宽度是否小于一定的值(如:768)     + 根据判断情况决定使用具体的大图还是小图

三、javascript

1、根据屏幕大小设置轮播图片

 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 });

2、window resize事件

由于上一步我们实现的过程是指在页面加载完成判断一次, - 当用户手动调整页面宽度过后没有及时发生变化, - 所以我们可以通过windowresize事件中重新完成以上操作来解决这个问题

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

3、小图片不需要使用背景的方式

  - 小图如果还是使用背景的方式,当屏幕特别小时,效果很差   - 所以当使用小图时,改用img的方式

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

  按照目前的情况,如果是小图展示则不需要给容器加上410px的固定高度   - 所以我们可以通过CSS媒体查询的方式解决

 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 }

四、栅格系统

网格系统

- 该板块当屏幕为中等尺寸时分为3列,较小屏幕是分为2列 - 所以使用网格系统划分

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

五、媒体对象样式

- 每一个小块的样式可以通过Bootstrap中的媒体对象样式实现

<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>

六、响应式辅助类型

- 整个板块在超小屏幕下是隐藏起来的 + 只需要给当前板块加上hidden-xs的class

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

2.1K90
来自专栏mySoul

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述

19930
来自专栏小轻论坛

平面设计师必备的AI快捷键

在开多个AI文档的情况下。来回切换是有点麻烦的,点来点去有点慢 CTRL+F6,可以来回切换。

34820
来自专栏HTML5学堂

标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有...

36090
来自专栏偏前端工程师的驿站

JS魔法堂:通过marquee标签实现信息滚动效果

一、前言                                      有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有...

27770
来自专栏前端笔记

【CSS3 理论知识】表格边框(table-border)你知多少???

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己...

33860
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

98350
来自专栏数据小魔方

裁图、抠图、换背景,PPT也可以

今天跟大家聊一聊PPT的基本图片处理功能! ▽ 每次做PPT的时候 总想弄几个感觉还不错的图片 插入PPT里来装装bigger 可是能找到的图片 不是背景不搭 ...

405100
来自专栏陈泽钦的专栏

页面性能优化的利器 — Timeline

网页中的重绘过程是影响整体性能下降的关键点之一,因而网站开发者应该更多地去避免在站点中进行不必要以及不适时的重绘步骤,本文主要讲述如何借助Inspector中的...

2.1K10
来自专栏九彩拼盘的叨叨叨

用CSS来找出两张图的差异

其中,灰色的部分为相同的部分,并且灰色的部分的颜色值为rgb(127.5, 127.5, 127.5)。

9310

扫码关注云+社区

领取腾讯云代金券