[收藏]自适应屏幕轮播图详解

相应的工具:

  • bootstrap
  • jQuery

材料:

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

原理及实现方法:

  1. 当屏幕宽度大于等于768px时,图片使用大图,轮播图里的div高度固定,宽度为窗口的宽度(随窗口宽度的变化而变化)

  2. 当屏幕宽度小于768px(手机)时,将图片换为小图,并在div里生成img标签,img的宽高随窗口变化而变化,包裹img的div也随之变化

  3. html代码

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

    4、css代码

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

    5、js代码

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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)

原文地址:www.cnblogs.com/zmshare/p/6091102.html

Mr.Naas wechat
欢迎关注本人公众号