效果如圖所示：

js程式碼部分：

/**
 * Created by Administrator on 2017/9/15.
 */

(function(){
    var firstDom = $("#zzScroll .item:last");
    var scrollWidth = $("#zzScroll .item").innerWidth()+1;
    var scrollObj = $("#zzScroll .wrapbox");
    var box = $("#zzScroll");
    //手機端相容增值服務滾動
    var moblie = window.navigator.userAgent.indexOf("iPhone"
 
) !== -1 || window.navigator.userAgent.indexOf("Android") !== -1;
    if(moblie){
        box.find(".item").width(box.width());
        scrollWidth = box.width()+30;
        scrollObj.css({"left":"-" + ($("#zzScroll .item").width()+41) + "px"});
    }else{
        scrollObj.css({"left":"-" + scrollWidth + "px"
 
});
    }
    scrollObj.prepend(firstDom);

    //定時輪播函式
    function autoPlay(dir){
        //-是向左滾動，+好是向右滾動
        if(dir == "-"){
            scrollObj.animate({"left": dir + (scrollWidth*2) + "px" },500,function(){
                $(this).append($(this).children().first());
                scrollObj.css({"left"
 
: dir + scrollWidth + "px"});
            });
        }else{
            scrollObj.animate({"left": "0px" },500,function(){
                $(this).prepend($(this).children().last());
                scrollObj.css({"left": "-" + scrollWidth + "px"});
            });
        }

    }
    //開始定時輪播
    var timer = setInterval(function(){
        autoPlay("-");
    },3000);

    //滑鼠移入移出上下切換按鈕
    $("#zzScroll span[class*='-btn']").hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(function(){
            autoPlay("-");
        },3000);
    });
    //點選下一張按鈕
    $("#zzScroll span[class='next-btn']").click(function(){
        if(!scrollObj.is(":animated")){
            autoPlay("-");
        }
    });
    //點選上一張按鈕
    $("#zzScroll span[class='prev-btn']").click(function(){
        if(!scrollObj.is(":animated")){
            autoPlay("+");
        }
    });

})();

html程式碼部分:

<div class="gs-sever zz-sever">
            <div class="container">
                <div class="title">
                    <h2>增值服務</h2>
                    <p>涵蓋各類增值服務內容，品質優越服務高效！</p>
                </div>
            </div>
            <div class="container list-item" id="zzScroll">
                <span class="prev-btn">〈</span>
                <span class="next-btn">〉</span>
                <div class="wrapbox">
                    <div class="col-md-3 item">
                        <div class="box">
                            <img src="img/zz-sever.png" alt="" title=""/>
                            <h2>一般企業註冊1</h2>
                            <p>專業機構為您辦理，全國省區皆可選擇，我們擁有最專業的團隊和服務</p>
                        </div>
                    </div>
                    <div class="col-md-3 item">
                        <div class="box">
                            <img src="img/zz-sever.png" alt="" title=""/>
                            <h2>一般企業註冊2</h2>
                            <p>專業機構為您辦理，全國省區皆可選擇，我們擁有最專業的團隊和服務</p>
                        </div>
                    </div>
                    <div class="col-md-3 item">
                        <div class="box">
                            <img src="img/zz-sever.png" alt="" title=""/>
                            <h2>一般企業註冊3</h2>
                            <p>專業機構為您辦理，全國省區皆可選擇，我們擁有最專業的團隊和服務</p>
                        </div>
                    </div>
                    <div class="col-md-3 item">
                        <div class="box">
                            <img src="img/zz-sever.png" alt="" title=""/>
                            <h2>一般企業註冊4</h2>
                            <p>專業機構為您辦理，全國省區皆可選擇，我們擁有最專業的團隊和服務</p>
                        </div>
                    </div>
                    <div class="col-md-3 item">
                        <div class="box">
                            <img src="img/zz-sever.png" alt="" title=""/>
                            <h2>一般企業註冊5</h2>
                            <p>專業機構為您辦理，全國省區皆可選擇，我們擁有最專業的團隊和服務</p>
                        </div>
                    </div>
                    <div class="col-md-3 item">
                        <div class="box">
                            <img src="img/zz-sever.png" alt="" title=""/>
                            <h2>一般企業註冊6</h2>
                            <p>專業機構為您辦理，全國省區皆可選擇，我們擁有最專業的團隊和服務</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container more">
                <a href="#">檢視更多</a>
            </div>
        </div>

CSS程式碼部分：

.main .zz-sever .list-item .item{height:275px;width:285px;padding-bottom:0;overflow: hidden;}
.main .zz-sever .list-item .item .box{background:#fff;border:1px solid #D7D7D7;}
.main .zz-sever .list-item .item .box img{width:100%;height:150px;margin:0;}
.main .zz-sever .list-item .item .box h2{padding:10px 20px;margin:0;}
.main .zz-sever .list-item .item .box p{padding:0 20px 10px 20px;}
.main .zz-sever .list-item{position: relative;overflow: hidden;}
.main .zz-sever .list-item span[class*="-btn"]{position:absolute;z-index:99999;display:block;height:80px;width:30px;line-height:80px;text-align:center;color:#fff;background:#000;opacity:.85;}
.main .zz-sever .list-item span.next-btn{position:absolute;right:0;top:100px;user-select:none;cursor:pointer;}
.main .zz-sever .list-item span.prev-btn{position:absolute;left:0;top:100px;user-select:none;cursor:pointer;}
#zzScroll .wrapbox{width:3000px;position: relative;}
@media screen and (max-width:768px){
    .main .zz-sever .list-item .item{float:left;}
    .main .list-item .item{border:none;}
    .main .zz-sever .list-item .wrapbox{width:3000px;position: relative;}

}