//主要的功能介绍：首先每隔一秒实现一次自动轮播，当鼠标在对应的图片或按钮上时，取消自动滚动
HTML:
<div class="team_show">
<ul id="TeamNav">
<li>
<div class="pic" style="background-color: #929098;">
<img src="images/首页/6cee8fb805fefda4a8df11c4196e514c282f68732016f-r4ZFEf_fw658.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic" style="background-color: #929098;">
<img src="images/首页/java.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic">
<img src="images/首页/321ca905774be6bb300f21d4fc50c59c5e7a9292be0b-OC2tqW_fw658.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic" style="background-color: #929098;">
<img src="images/首页/d03bf8e1eae864840b61e6f05ddab3099866f8351d709-5EHgcK_fw658.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic">
<img src="images/首页/python.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic">
<img src="images/首页/qianduan-3.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic">
<img src="images/首页/屏幕快照2019-03-15下午4.54.52.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic">
<img src="images/首页/屏幕快照2019-03-15下午4.54.58.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic" style="background-color: #929098;">
<img src="images/首页/6cee8fb805fefda4a8df11c4196e514c282f68732016f-r4ZFEf_fw658.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic" style="background-color: #929098;">
<img src="images/首页/java.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic">
<img src="images/首页/321ca905774be6bb300f21d4fc50c59c5e7a9292be0b-OC2tqW_fw658.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
<li>
<div class="pic" style="background-color: #929098;">
<img src="images/首页/d03bf8e1eae864840b61e6f05ddab3099866f8351d709- 5EHgcK_fw658.png" alt="">
</div>
<div class="info">
<p class="name">严武军</p>
<p class="carrer">从事互联网与移动互联网19年<br>
曾深圳创业担任创明科技有限公司CEO，从事对欧美服务外包行业，曾任中国网通高级项目经理
</p>
</div>
</li>
</ul>
</div>
JS部分 (记得引入jquery)
$(function(){
window.addEventListener("load",function(){
//通过ID找到对应的元素
var TeamNav=document.getElementById("TeamNav");
//把子元素放入一个数组中
var TeamNavLis=TeamNav.getElementsByTagName("li");
//左按钮
var PREV=document.getElementById("PREV");
//右按钮
var NEXT=document.getElementById("NEXT");
//首先需要有一个函数用来封装轮播功能
var indexs=0; //获取位置属性 因为整个轮播图的
function teamChange(){
if(indexs==8){
$("#TeamNav").css("marginLeft",0)
indexs=1
}else{
indexs++
}
$("#TeamNav").stop().animate({
"marginLeft":-indexs*302+"px"
},1000)
}
var x=setInterval(teamChange,1000)
//鼠标进入时停止定时器离开时启动
$("#TeamNav").mouseenter(function(){
clearInterval(x);
})
$("#TeamNav").mouseleave(function(){
x=setInterval(teamChange,1000);
})
//鼠标离开时启动定时器
$("#PREV").mouseleave(function(){
x=setInterval(teamChange,1000);
})
$("#PREV").mouseenter(function(){
clearInterval(x);
})
$("#NEXT").mouseleave(function(){
x=setInterval(teamChange,1000);
})
$("#NEXT").mouseenter(function(){
clearInterval(x);
})
//左按钮点击
$("#PREV").click(function(){
//因为左侧按钮和自动轮播的效果相同，所以此处直接调用自动轮播函数
teamChange()
})
$("#NEXT").click(function(){
if(indexs==0){
//因为一共有8张图所以当滚动到第一张的时候其实是第八张，所以当indexs==0的时候，需要一瞬间把ul拉到第八张的位置，以便于实现无缝滚动
$("#TeamNav").css("marginLeft","-4368px")
indexs=8
}else{
indexs--
}
$("#TeamNav").stop().animate({
"marginLeft":-indexs*302+"px"
},1000)
})
