css走马灯，一步一停（专家介绍类型）

<div class="CON--cen-pd3 clear aniview slow" data-av-animation="fadeIn">
<i class="layui-icon layui-icon-left" id="car_prev" style="font-size: 30px; color: #1E9FFF;position:relative;top: 6rem;right: 2.4rem;cursor:pointer;"></i>
<div class="profld position" id="indexcar" data-listnum="4">
<ol class='metlist'>
{dede:arclist typeid="8"}
<li class='list'><a href='[field:arcurl/]' title='[field:title/] ' target='_self' class='img'><img src='[field:picname/]' alt='[field:title/] ' title='[field:title/] ' width='120' /></a>
<h3><a href='[field:arcurl/]' title='[field:title/] ' target='_self'>[field:title/]</a></h3>
</li>
{/dede:arclist}
</ol>
</div>
<i class="layui-icon layui-icon-right next" id="car_next" style="font-size: 30px; color: #1E9FFF;position:relative;bottom: 8rem;left: 2.5rem;cursor:pointer;"></i>
</div>
<script type="text/javascript">
var _index5=0;
var timer = setInterval(function(){
_index5++;
var len=$("ol.metlist li").length;
if(_index5+6>len){
$("ol.metlist").stop().append($("ol.metlist").html());
}
$("ol.metlist").stop().animate({left:-_index5*173},1000);
},3000);

$("#car_next").click(function(){
_index5++;
var len=$("ol.metlist li").length;
if(_index5+6>len){
$("ol.metlist").stop().append($("ol.metlist").html());
}
$("ol.metlist").stop().animate({left:-_index5*173},1000);
});

$("#car_prev").click(function(){
if(_index5==0){
$("ol.metlist").prepend($("ol.metlist").html());
$("ol.metlist").css("left","-1380px");
_index5=7
}
_index5--;
$("ol.metlist").stop().animate({left:-_index5*173},1000);
});
</script>

<style>

/*专家团队*/
.position{position:relative;}
.CON--cen-pd3{
padding: 0 50px 12px;
min-height: 150px;
border:1px solid rgb(219, 226, 247);}
.CON--bot{padding-top:2px;}
.CON--bot .profld{ margin:0px; position: relative;
top: -0.5rem; right: 0rem; overflow:hidden; height: 190px;}
.CON--bot h3 span{ float:left; }
.CON--bot ol{ position: absolute; width: 2012em;height: 100%; }
.CON--bot ol li{ float:left; width: 173px; text-align:center; height: 100%;}
.CON--bot ol li a.img{ display:block; text-align:center; font-size:0px;height: 100%;}
.CON--bot ol li a.img img{ margin:auto; border:1px solid #d6d6d6;height: 78%;}
.CON--bot ol li h3{ font-weight:normal; margin-top:5px; height:20px; line-height:20px;
overflow:hidden;
font-size: 0.9rem;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
bottom: 2.5rem;}
.CON--bot .flip{width:70px; height:168px; float:left;
position:relative; top:45px; z-index:100;}
* html .CON--bot .flip{ width:70px;}
*html .CON--bot .flip{ width:70px;}
.CON--bot .next,.CON--bot .prev{width:35px;overflow: hidden;}
.CON--bot .next{background-position:-35px 0px; float:right; position:absolute; left:960px;}
.CON--bot .prev{
background-position: 0px 0px;
float: left;
position: relative;
left: 1.5rem;
bottom: 1.4rem;}
.fl{
margin: 1.8rem 0 0.8rem;
font-size: 1.2rem;
font-weight: 600;
}

/*专家团队*/

</style>