使用BootStrap建立响应式网页——通栏轮播图(carousel)


Posted in Javascript onDecember 21, 2016

1、bootstrap提供了js插件——轮播图

我们还是照旧,直接拿过来用,需要改的地方再说。

2、修改

小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载。

图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图做不到等比例缩放)。

承载轮播图的盒子高度:大图的的时候用图片的高度,小图自适应,所以要用到媒体查询,设置容器高度。

3、代码

<section id="banner" class="carousel slide" data-ride="carousel">
        <!--小圆点 -->
        <ol class="carousel-indicators">
          <li data-target="#banner" data-slide-to="0" class="active"></li>
          <li data-target="#banner" data-slide-to="1"></li>
          <li data-target="#banner" data-slide-to="2"></li>
          <li data-target="#banner" data-slide-to="3"></li>
        </ol>
        <!-- 轮播图片 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active" data-img-lg="img/slide_01_2000x410.jpg" data-img-xs="img/slide_01_640x340.jpg">
          </div>
          <div class="item" data-img-lg="img/slide_02_2000x410.jpg" data-img-xs="img/slide_02_640x340.jpg">
          </div>
          <div class="item" data-img-lg="img/slide_03_2000x410.jpg" data-img-xs="img/slide_03_640x340.jpg">
          </div>
          <div class="item" data-img-lg="img/slide_04_2000x410.jpg" data-img-xs="img/slide_04_640x340.jpg">
          </div>
        </div>
        <!-- 左右轮播 -->
        <a class="left carousel-control" href="#banner" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#banner" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </section>
<script type="text/javascript">
      $(function() {
        //获取屏幕宽度
//        var screenWidth=$(window).width();
        //判断是不是手机屏幕
//        if(screenWidth<768){//手机屏幕
//          $("#banner .carousel-inner .item").each(function(index,item){
//          var $item=$(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
//          $item.css("background-image","url("+$item.data('img-xs')+")");
//          });
//        }else{//大屏幕
//          $("#banner .carousel-inner .item").each(function(index,item){
//          var $item=$(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
//          $item.css("background-image",'url('+$item.data('img-lg')+')');
//          });
//        }
        //三元式
//        var isPhone=screenWidth<768;
//        $("#banner .carousel-inner .item").each(function(index,item){
//          var $item = $(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
//          $item.css("background-image","url("+$item.data(isPhone?'img-xs':'img-lg')+")");
//        });
        function selectImg(){
          var screenWidth=$(window).width();
          var isPhone=screenWidth<768;
          $("#banner .carousel-inner .item").each(function(index,item){
            var $item = $(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
            $item.css("background-image",'url('+$item.data(isPhone?'img-xs':'img-lg')+')');
            //我们需要小图的时候等比例变化,所以我们需要img标签
            if(isPhone){
              $item.html("<img src='"+$item.data('img-xs')+"' alt='' />");
            }else {
              $item.empty();
            }
          });
        }
//        $(window).on("resize",selectImg);//这样是没有效果的,必须屏幕尺寸变化一下才会加载图片
        $(window).on('resize',selectImg).trigger('resize');//触发的是resize事件,不是事件处理程序selectImg
      });
    </script>

以上所述是小编给大家介绍的使用BootStrap建立响应式网页——通栏轮播图(carousel),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
编写React组件项目实践分析
Mar 04 Javascript
详解redux异步操作实践
Aug 15 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
js实现开启密码大写提示
Dec 21 #Javascript
js实现的在线调色板功能完整实例
Dec 21 #Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 #Javascript
清除输入框内的空格
Dec 21 #Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 #Javascript
jQuery延迟执行的实现方法
Dec 21 #Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python实现无证书加密解密实例
2014/10/27 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python中is和==的区别详解
2018/11/15 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python 图片去噪的方法示例
2019/07/09 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python中pyplot基础图标函数整理
2020/11/10 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
银行介绍信范文
2014/01/10 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
组织鉴定材料
2014/06/02 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
给校长的一封检讨书
2014/09/20 职场文书
单位计划生育责任书
2015/05/09 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫