Javascript 下载模板上的HTML动画

我对html编程比较陌生。我和我的朋友想要一个wep页面，这就是为什么我下载了一个免费的模板

在此模板中有“团队”部分。由于并非所有内容都适合第一页，并且我们不希望有按钮可供单击，因此我们希望将其设置为动画（它应水平滚动以显示所有团队成员，并且不应停止）

你有任何代码，提示，关键字等，可以帮助我做到这一点吗

屏幕：

代码

/*团队部分*/
#特遣部队{
背景：url（../img/03.jpg）；
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
背景重复：无重复；
颜色：#ffffff；
}
#特遣部队，覆盖{
背景：-莫兹线性梯度（顶部，rgba（0,0,0,0.8）0%，rgba（0,0,0,0.73）17%，rgba（0,0,0,0,0.66）35%，rgba（0,0,0,0.55）62%，rgba（0,0,0,0,0.4）100%）/*FF3.6+*/
背景：-webkit渐变（线性，左上，左下，颜色停止（0%，rgba（0,0,0,0.8）），颜色停止（17%，rgba（0,0,0,0.73）），颜色停止（35%，rgba（0,0,0,0.66）），颜色停止（62%，rgba（0,0,0,0,0.55）），颜色停止（100%，rgba（0,0,0,0.4））；/*铬，Safari4+*/
背景：-webkit线性梯度（顶部，rgba（0,0,0,0.8）0%，rgba（0,0,0,0.73）17%，rgba（0,0,0,0,0.66）35%，rgba（0,0,0,0.55）62%，rgba（0,0,0,0,0.4）100%）/*铬10+，红花5.1+*/
背景：-o-线性梯度（顶部，rgba（0,0,0,0.8）0%，rgba（0,0,0,0.73）17%，rgba（0,0,0,0,0.66）35%，rgba（0,0,0,0.55）62%，rgba（0,0,0,0,0.4）100%）/*Opera 11.10+*/
背景：-ms线性梯度（顶部，rgba（0,0,0,0.8）0%，rgba（0,0,0,0.73）17%，rgba（0,0,0,0.66）35%，rgba（0,0,0,0.55）62%，rgba（0,0,0,0,0.4）100%）/*IE10+*/
背景：线性梯度（底部，rgba（0,0,0,0.8）0%，rgba（0,0,0,0.73）17%，rgba（0,0,0,0.66）35%，rgba（0,0,0,0.55）62%，rgba（0,0,0,0,0.4）100%）/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#cc000000'，endColorstr='#66000000'，GradientType=0）；/*IE6-9*/
高度：自动；
背景附件：固定；
填充：80px0；
}
.section-title.center{
填充：30px0；
}
.章节标题h2，
.剖面图-标题.中心h2{
字体大小：300；
}
.section-title.center.line{
边框顶部：4px实心#fcac45；
高度：10px；
宽度：60px；
文本对齐：居中；
保证金：0自动；
边缘顶部：20px；
}
.section-title.center人力资源部{
边框顶部：4倍实心rgba（252172,69,0.34）；
宽度：40px；
文本对齐：居中；
边缘顶部：10px；
位置：相对位置；
左：17%；
}
#团队{margin:0 auto}
#团队。项目{
填充：0；
利润率：15px；
颜色：#FFF；
文本对齐：居中；
}
img.img-circle.team-img{
宽度：120px；
高度：120px；
边框：4px实心透明；
过渡：均为0.5s；
}
#tf团队.项目.缩略图：悬停>img.img-circle.team-img{
边框：4px实心#FCAC45；
}
#特遣部队，缩略图{
背景：透明；
边界：0；
}
#tf团队。缩略图。标题{
填充：9px；
颜色：#F2F2；
}
.owl主题.owl控件.owl页面跨度{
显示：块；
宽度：10px；
高度：10px；
利润率：5px7px；
过滤器：α（不透明度=1）；
不透明度：1；
-webkit边界半径：0；
-moz边界半径：20px；
边界半径：0；
背景：#FFFFFF；
过渡：均为0.5s；
}
.owl主题.owl控件.owl-page.active span，
.owl主题.owl-controls.clickable.owl页面：悬停范围{
过滤器：α（不透明度=100）；
不透明度：1；
背景：#FFFFFF；
}
.owl主题.owl控件.owl-page.active span{
背景#FCAC45；
}

Unser团队

托比亚斯·温宁格
Komitee/Öffentlichkeitsarbeit

纵火。。。贝斯特湖

劳伦斯斯帕特
科米特/项目管理

随机齐塔特

海格
Komitee/随便什么


达尼尔·穆罕默德
Komitee/


马蒂亚斯·蒂伯
Komitee/


西蒙·费德曼
沃斯坦/

您可以使用引导旋转木马来设置动画。 如本例所示： eac中并列的四个图像

.item img {width: 25%; height: auto; float:left;}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/450x350" alt="Slide 1">
      <img src="http://placehold.it/450x350" alt="Slide 1">
       <img src="http://placehold.it/450x350" alt="Slide 1">
      <img src="http://placehold.it/450x350" alt="Slide 1">

    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 2">
      <img src="http://placehold.it/450x350" alt="Slide 2">
       <img src="http://placehold.it/450x350" alt="Slide 2">
      <img src="http://placehold.it/450x350" alt="Slide 2">

    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 3">
      <img src="http://placehold.it/450x350" alt="Slide 3">
       <img src="http://placehold.it/450x350" alt="Slide 3">
      <img src="http://placehold.it/450x350" alt="Slide 3">

    </div>        
  </div>

</div>

var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});

owl.trigger('play.owl.autoplay',[1000])