左右滑动换显示插件

html

<div class="c-box-bottom">

    <div class="cbox-title-bottom"> 题目 </div>
    
    <div class="cbox-content">
    
        <div class="turn-left full-height parent"><</div>
        
        <div class="full-height changeArea">
            <div class="full-height">
            
                <div class="full-height parent">
                        <dl class="no-marin">
                            <dt class="parent"><img src="" alt=""></dt>
                            <dt class="text-center">钢铁质量优化管理</dt>
                        </dl>
                </div>
                
                <div class="full-height parent">
                        <dl class="no-marin">
                            <dt class="parent"><img src=" alt=""></dt>
                            <dt class="text-center">石化生产执行系统优化</dt>
                        </dl>
                </div>
              
            </div>
        </div>
        
        <div class="turn-right full-height parent">></div>
        
    </div>
</div>

css

.c-box-bottom{
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px -2px 35px #000;
    border-radius: 3px;
    width: calc( 100% - 15px);
    height: calc( 100% - 15px );
    overflow: hidden;
}
.cbox-title-bottom{
    padding:4px 0 1px 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-image: -webkit-linear-gradient(right,rgba(0,0,0,0),#fff,rgba(0,0,0,0)) 30 30;;
}
.cbox-content{
    height: calc( 100% - 27px );
    color: #fff;
    padding: 5px 40px 0 40px;
    position: relative;
}
.cbox-content img{
    width: 65px;
}
.cbox-content .turn-left,.cbox-content .turn-right{
    position: absolute;
    top: 0;
    width: 40px;
    font-size: 23px;
    cursor: pointer;
}
.cbox-content .turn-left{
    left: 0;
}
.cbox-content .turn-right{
    right: 0;
}
.bottomArea .changeArea{
    overflow: auto;
}
.bottomArea .changeArea>div{
    width:300%;
    overflow: hidden;
}
.changeArea>div>div{
    width:16.66%;
    float:left;
}

js

    function turnPage(dom, num, len) {

        var domW = dom.width();
        var onePiece = domW;
        var w = dom.scrollLeft() + num * onePiece;

        dom.animate({scrollLeft: w + 'px'}, 400);

    }

    $('.turn-left').click(function () {
        var allBoxs = $(this).next().children().children().length;
        turnPage($(this).next(), -1, allBoxs);
    });

    $('.turn-right').click(function () {
        var allBoxs = $(this).prev().children().children().length;
        turnPage($(this).prev(), 1, allBoxs);
    });