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

 更新时间:2016年12月21日 13:43:05   作者:苏羽垄  
这篇文章主要介绍了使用BootStrap建立响应式网页通栏轮播图(carousel)的相关资料,需要的朋友可以参考下

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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Bootstrap页面缩小变形的快速解决办法

    Bootstrap页面缩小变形的快速解决办法

    bootstrap布局是应用得很广泛的一种网页布局方法,下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法,需要的朋友参考下吧
    2017-02-02
  • JavaScript中Infinity(无穷数)的使用和注意事项

    JavaScript中Infinity(无穷数)的使用和注意事项

    Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是它比任何有限的数字都大,如果不知道 Infinity,我们在一些运算操作遇到时,就会觉得很有意思,下面这篇文章主要给大家介绍了关于JavaScript中Infinity(无穷数)的使用和注意事项,需要的朋友可以参考下
    2022-04-04
  • 通过修改360抢票的刷新频率和突破8车次限制实现方法

    通过修改360抢票的刷新频率和突破8车次限制实现方法

    这篇文章主要介绍了通过修改360抢票的刷新频率和突破8车次限制实现方法的相关资料,现在刷票工具很多,这里就举一例修改,增加抢票频率及突破8车次限制,需要的朋友可以参考下
    2017-01-01
  • 解决Layui数据表格中checkbox位置不居中的方法

    解决Layui数据表格中checkbox位置不居中的方法

    今天小编就为大家分享一篇解决Layui数据表格中checkbox位置不居中的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js禁止浏览器页面后退功能的实例(推荐)

    js禁止浏览器页面后退功能的实例(推荐)

    下面小编就为大家带来一篇js禁止浏览器页面后退功能的实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS中双击和单击事件冲突的解决方法

    JS中双击和单击事件冲突的解决方法

    这篇文章主要为大家详细介绍了JS中双击和单击事件冲突的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • Actionscript与javascript交互实例程序(修改)

    Actionscript与javascript交互实例程序(修改)

    这篇文章主要介绍了Actionscript与javascript交互实例程序(修改)的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • JavaScript XML操作 封装类

    JavaScript XML操作 封装类

    最近研究XML 用JavaScript写了一个简单的XML读取的操作类发给大家分享一下 可兼容 IE 火狐 Safari Chrome 6月30日下午 新修改了一下
    2009-07-07
  • 深入理解js函数的作用域与this指向

    深入理解js函数的作用域与this指向

    下面小编就为大家带来一篇深入理解js函数的作用域与this指向。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript substr和substring用法比较

    javascript substr和substring用法比较

    在js中substring和substr都是用来截取字符串的,那么substring和substr之间的具体区别在哪里,有没有区别呢,下面我来给各位详细引用一些实例来介绍这些问题
    2009-06-06

最新评论