使用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 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
微信小程序class封装http代码实例
Aug 24 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
vue router 动态路由清除方式
May 25 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
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
详解vue-cli 接口代理配置
2017/12/13 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
python求pi的方法
2014/10/08 Python
Python探索之ModelForm代码详解
2017/10/26 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
学校消防安全制度
2014/01/30 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
驻村工作简报
2015/07/20 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书