自适应屏幕轮播图详解

相应的工具:

bootstrap
jQuery

材料：

4张640x340的图片
4张2000x410内容相同的图片

原理及实现方法:

当屏幕宽度大于等于768px时，图片使用大图，轮播图里的div高度固定，宽度为窗口的宽度(随窗口宽度的变化而变化)
当屏幕宽度小于768px（手机）时，将图片换为小图，并在div里生成img标签，img的宽高随窗口变化而变化，包裹img的div也随之变化

html代码

 1  <section id="main_ad" class="carousel slide" data-ride="carousel">
 2     <!-- 活动指示器 -->
 3     <ol class="carousel-indicators">
 4       <li data-target="#main_ad" data-slide-to="0" class="active"></li>
 5       <li data-target="#main_ad" data-slide-to="1"></li>
 6       <li data-target="#main_ad" data-slide-to="2"></li>
 7       <li data-target="#main_ad" data-slide-to="3"></li>
 8     </ol>
 9     <!-- 轮播项 -->
10     <div class="carousel-inner" role="listbox">
11       <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
12       <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
13       <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
14       <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
15     </div>
16     <!-- 控制按钮 -->
17     <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
18       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
19       <span class="sr-only">Previous</span>
20     </a>
21     <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
22       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
23       <span class="sr-only">Next</span>
24     </a>
25   </section>

css代码

 1 #main_ad .carousel-inner .item{
 2     background-size: cover; /*让图片覆盖满整个div*/
 3     background-position: center,center; /*让图片在div里水平垂直居中*/
 4     background-repeat: no-repeat;
 5     height: 410px;
 6 }
 7 @media (max-width:768px) {
 8     #main_ad .carousel-inner .item {
 9         height: auto;
10     }
11     #main_ad .carousel-inner .item img{
12         width: 100%;
13     }
14 }

js代码

 1 $(function() {
 2   /**
 3    * 根据屏幕宽度的变化决定轮播图片应该展示什么 5    */
 6   function resize() {
 7     // 获取屏幕宽度
 8     var windowWidth = $(window).width();
 9     // 判断屏幕属于大还是小
10     var isSmallScreen = windowWidth < 768;
11     // 根据大小为界面上的每一张轮播图设置背景
13     $(\'#main_ad > .carousel-inner > .item\').each(function(i, item) {
14       var $item = $(item);
15       // var imgSrc = $item.data(isSmallScreen ? \'image-xs\' : \'image-lg\');
16       var imgSrc =
17         isSmallScreen ? $item.data(\'image-xs\') : $item.data(\'image-lg\');
18       // 设置背景图片
19       $item.css(\'backgroundImage\', \'url("\' + imgSrc + \'")\');
20       //
21       // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
22       if (isSmallScreen) {
23         $item.html(\'<img src="\' + imgSrc + \'" alt="" />\');
24       } else {
25         $item.empty();
26       }
27     });
28   }
30   // // 让window对象立即触发一下resize，初始化div的背景图
31   // $(window).trigger(\'resize\');
32 
33 
34   $(window).on(\'resize\', resize).trigger(\'resize\');
35 });

在移动端手指触摸轮播图切换效果:

 var carousels = $(".carousel");  //获取所有的轮播图
    var startX,endX,finalMove;
    var diviation = 60;  //让手指滑动一定距离轮播图才工作
    carousels.on("touchstart",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        startX = event.originalEvent.touches[0].pageX;//获取手指接触屏幕时的位置
    });
    carousels.on("touchmove",function(event) {
       // console.log(event.originalEvent.touches[0].pageX);
        endX = event.originalEvent.touches[0].pageX;//手指滑动时该值一直刷新，当手指离开时保留最后一次手指的位置
    })
    carousels.on("touchend",function(event) {
        //console.log(event.originalEvent.touches[0].pageX);
        finalMove = Math.abs(startX - endX) - diviation;
        if(finalMove > 0 && (startX - endX) > 0) {//如果手指滑动方向向左，轮播图向右播放一张图片
            $(this).carousel(\'next);
        }
        else if (finalMove > 0 && (startX - endX) < 0) {
            $(this).carousel(\'prev\');
        }
    })

一些补充：

　　1. 为什么不一开始就用img标签？

　　　因为要让图片水平垂直居中，这样更方便

　　2.bootstrap文档地址：v3.bootcss.com

　　3.@media 可以针对不同的屏幕尺寸设置不同的样式

　　4.超小屏幕手机 (<768px) 小屏幕平板 (≥768px)中等屏幕桌面显示器 (≥992px)大屏幕大桌面显示器 (≥1200px)

秒客网

自适应屏幕轮播图详解

相关文章