拥有博客的第一天,试试水

最近做公司项目,页面banner图要用轮播展示,而且图片是从后台取的,设计告诉我,图片轮播之前其他网页有用过有现成的,然而我不喜欢那样的轮播,于是就自己写了一个:

首先,图片大小是设计定好的,所以简单的布局

 .banner{
            width: 100%;
            height: 380px;
            margin: auto;
            background-repeat: no-repeat;
            background-position: center;
            transition: all 2s;
        }
        .bannerContainer{
            width: 1190px;
            height: 100%;
            margin: auto;
            padding-top: 242px;
            box-sizing: border-box;
            position: relative;
        }
        .spanBox{
            position: relative;
            height: 30px;
            width: 50%;
            margin: auto;
            top:80px;
            text-align: center;
        }
        .spanBox span{
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #000;
            display: inline-block;
            vertical-align: bottom;
            margin-right: 20px;
            opacity: 0.5;
        }
        .spanBox .currentOne{
            background-color: #7953d5;
            width: 37px;
            opacity: 1;
        }

<div class="banner">
    <div class="bannerContainer">
        <div class="spanBox">
            <span class="currentOne"></span>
        </div>
    </div>
</div>

然后就是从后台接收banner图的数据,利用jq来做定时器进行轮播,当然也包含鼠标悬停静止,移开启动;点击小圆点切换图片

$(function () {
    //这个img数组应从后台取出,图片地址最好为绝对地址,这样便于维护
    var imgs=["url('together/images/banner.jpg')","url('together/images/banner1.jpg')","url('together/images/banner2.jpg')","url('together/images/banner1.jpg')"];
    // 下边这个是动态为轮播图添加点击圆点
    for(var j=1;j<imgs.length;j++){
        $('.spanBox').append('<span></span>')
    }

    //启动图片轮播
    ImgTurn(0,imgs);
　　//设置一个鼠标悬停在小圆点上是否有点击的状态,false为没点
    var isClick=false;
    //轮播图hover暂停与重启
    $('.banner').hover(function () {
        clearInterval(myInterval);
    },function () {
        if(isClick===true){
            isClick=false;
        }else { //获取悬停是展示的图片的索引 
            $('.spanBox span').each(function (index) {
                if($('.spanBox span').eq(index).hasClass('currentOne')){
                    ImgTurn(index,imgs);
                }
            });
        }
    });

    //小圆点的点击事件
    $('.spanBox span').each(function (index) {
        $(this).click(function (e) {
            e.stopPropagation();//阻止事件冒泡
            isClick=true;
            clearInterval(myInterval);
            ImgTurn(index,imgs);
        });
    });
});
//图片轮播
function ImgTurn(i,imgs) {
    $('.banner').css({'background-image':imgs[i]});
    $('.spanBox span').eq(i).addClass('currentOne').siblings().removeClass('currentOne');
    myInterval=setInterval(function () {
        if(i===imgs.length-1) i=-1;
        $('.banner').css({'background-image':imgs[i+1]});
        $('.spanBox span').eq(i+1).addClass('currentOne').siblings().removeClass('currentOne');
        i++;
    },5000);
}

整个js 代码,可以封装成一个方法,需要一个参数,就是Imgs数组,只要传过来图片地址,就可以正常轮播(图片大小要求,与样式一致,根据设计师的规定修改)