bootstrap响应式兼容PC和移动端图片无缝滚动效果demo

/**
* 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("+");
}
});

})();

<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>

.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;}

}