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>

 

版权声明：本文为sylz原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/sylz/p/5795109.html