xslider使用方法



依赖:

    



html:

  



css:

/*轮播图主内容 css*/
.productshow{
    position: relative;
    padding: 20px 100px 0;
    overflow: hidden;
}
.productshow .scrollcontainer{
    width: 1730px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    height:887px;
}
.productshow .scrollcontainer>ul{
    width:3460px;
    position:absolute;
    left:0;
    top:0;
}
.scrollcontainer>ul>li {
    width: 1730px;
    padding-left: 20px;
    overflow: hidden;
}


.aleft, .aright {
    position: absolute;
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
}

.aleft {
    left: 20px;
    background-position: -305px -90px;
}

.aright {
    right: 20px;
    background-position: -380px -90px;
}
.agrayright {
    background-position: -227px -90px;
}
.agrayleft {
    background-position: -152px -90px;
}



js:

 //轮播图
    $(".productshow").Xslider({
        unitdisplayed:1,
        numtoMove:1,
        scrollobjSize:Math.ceil($(".productshow").find(".libox").length)*1730
    });

你可能感兴趣的:(xslider使用方法)