18-3-25前端学习小记

来自前端小白的一则消息：

最近一直在学习Bootstrap框架，下面介绍下我今天的学习成果

轮播图效果：

1、指示器即下方的小圆点（现成）

2、左右的控制（现成）

3、滑块（重点改造）

（1）img和background的区别

img标签是写在html中的，background是写在css中的，虽然我们通常在head中引入css文件，但是css文件是在html加载完才执行的；因此重要的图片建议用img(例如：logo),若仅仅是浏览大量的图片建议用background (例如：轮播滑块图片) ；

在该项目中，为了保持图片缩放过程中始终保持居中状态，我们并没有直接添加背景，而是在div盒子里添加了data-image-lg="image/001.jpg",然后在js中添加设为背景。

（2）自适应问题

当屏幕宽度大于768,使用大图，高度固定，宽度随窗口的缩放而缩放

当屏幕宽度小于768（手机），大图换成小图，在div里生成img标签，宽高都随窗口的缩放而缩放

html:

<!--轮播图-->
<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 class="item" style="background-image: url(img/slide_02_2000x410.jpg) "></div>-->
            <!--<div class="item" style="background-image: url(img/slide_03_2000x410.jpg)"></div>-->
            <!--<div class="item" style="background-image: url(img/slide_04_2000x410.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>

css:

/*
    广告轮播部分
*/
#main_ad > .carousel-inner > .item {
    /*height: 410px;*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

    /*什么时候不能用410px高度*/
    /*可以通过媒体查询的方式控制*/
@media (min-width: 768px) {
    /*当屏幕宽度大于768的时候，才执行*/
    #main_ad > .carousel-inner > .item {
        height: 410px;
    }
}
#main_ad > .carousel-inner > .item img {
    width: 100%;
}

js:

// 当文档加载完成才会执行
$(function () {

    // 当屏幕大小发生改变，决定展示大图还是小图
    function resize() {

        // 获取屏幕的宽度
        var windowwidth = $(window).width();

        // 判断屏幕是大还是小
        var isSmallScreen = windowwidth < 768;
        // 根据屏幕大小为每一张轮播图设置背景
        // 获取到轮播图对象
        //  $('#main_ad > .carousel-inner > .item') 获取到的是DOM数组（多个元素）
        $('#main_ad > .carousel-inner > .item').each(function (i,item) {
            // 因为拿到的是DOM对象 需要转换
            var $item = $(item);
            // $element.data() 是一个函数，专门用于取元素上的自定义属性（data-abc）
            // 函数的参数就是我们要取得属性名称（abc）
            var imgSrc =
                isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');

            // 设置背景图片
            $item.css('backgroundImage','url("' + imgSrc +'")');

            // 用img能够实现图片大小的缩放
            if(isSmallScreen) {
                $item.html('<img src="'+ imgSrc +'"/>');
            }else {
                // 当由小图再次变成大图时，清空img
                $item.empty();
            }
        })
    }
    // $(window).on('resize', resize);
    // 让window对象立即触发一下resize
    // $(window).trigger('resize');
    $(window).on('resize', resize).trigger('resize');
})

18-3-25前端学习小记

猜你喜欢