回到顶部
我的头像

RedSpite

全屏自适应 热点图轮播banner简洁代码

在我才从零开始接触前端时,学的第一个特效就是banner轮播。js语言和c语言有很多相似之处,所以真是庆幸大学有好好考计算机二级呀。。汗!

初级小白通过自己一点一点摸索,总算写出了这个自适应大小的banner轮播图,可以无缝轮播,并自适应屏幕大小按比例缩小图片。

不过有个bug 。。 哈哈哈 只能用左右切换的方式轮播,因为整体div高度是自适应变化的,没有写死。

如果用淡入淡出效果,会有一个间隔时间整个div高度为零,下面的内容就会被挤上来

解决的方法是用window.resize 获取图片高度,再赋给div。但是我比较喜欢左右切换的效果,所以就没写啦~ 哈哈哈

HTML:
CSS:
                    .banner_div{        //最外部div容器
                        width:100%;
                        height:auto;
                        overflow: hidden;
                        position: relative;
                    }
                    .banner_img{        //图片列表
                        width:400%;
                        height:auto;

                    }
                    .banner_img li{
                        width: 25%;
                        height:auto;
                        float: left;
                    }
                    .banner_img li img{
                        width:auto;
                        height:auto;
                        max-width: 100%;
                        max-height:100%;
                    }
                    .banner_num{        //小圆点
                        position: absolute;
                        bottom: 1vh;
                        width: 100%;
                        text-align: center;
                    }
                    .banner_num li{
                        float: none;
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        margin:0 5px;
                        border-radius: 50%;
                        border: 2px solid #d9edf7;
                        background: #fff;
                        box-sizing: border-box;
                        cursor:pointer;
                    }
                    .banner_num li.active{
                        background: #75aaa2;
                        border: 2px solid #fff;
                    }
                
JS:
                    //banner 圆点生成
                    var size = $(".banner_img li").length;
                    for (var j = 1; j < size; j++) {
                        var _html = '
  • '; $(".banner_num").append(_html); } //第一个小圆点加激活样式 $(".banner_num li:first-child").addClass("active"); var i = 0; var t = setInterval(move, 4000); //鼠标滑过清除轮播定时器 $(".banner_div").hover(function () { clearInterval(t); }, function () { t = setInterval(move, 4000); }); //圆点点击 显示相应banner $(".banner_num li").click(function () { $(this).addClass("active").siblings().removeClass("active"); var index = $(this).index(); i = index; if (i == 0) { i = size - 1; } var left = -i * (100) + "%"; $(".banner_img").css("marginLeft", left); }); //banner 轮播函数 function move() { i++; if (i == size - 1) { show(); $(".banner_num li").eq(0).addClass("active").siblings().removeClass("active"); } else if (i == size) { //无缝轮播的重点! 轮播到最后一张banner时定位到第一张banner $(".banner_img").css("margin-left", "0"); i = 1; show(); } else { show(); } } function show() { var left = -i * (100) + "%"; $(".banner_img").animate({marginLeft: left}, 500); $(".banner_num li").eq(i).addClass("active").siblings().removeClass("active"); }

    2016.07.26

    © RedSpite | 蜀ICP备16004270号