一个速度极快、SEO友好、超级平滑的旋转木马，能够使用jQuery和CSS3转换在网络内容列表中淡出。

如今，每个人都在自己的网站上使用旋转木马。有许多花哨的旋转木马插件，您可以使用它们来实现相同的结果。如果您喜欢从头开始构建自己的旋转木马，以便能够根据需要控制和自定义所有内容，那么这个简短的教程可能会有所帮助。

如何使用它:

1.为转盘创建一个HTML列表。

<ul id="myCarousel"> 
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  ... 
</ul>

2.转盘的主要CSS样式。

ul {
  position: absolute;
  top: 50%;
  width: 800px;
  height: 200px; 
  left: 50%;
  margin-left: -400px;
  margin-top: -130px;
}
 
ul > li {
  width: 25%;
  list-style-type: none;
  position: absolute;
  top: 0;
  padding: 20px;
  height: 200px; 
  opacity: 0;
  padding-top: 40px;
  text-align: center;
  transition: 1s opacity; 
}
 
.active {
  opacity: 1;
}

3.在文档末尾加载所需的jQuery JavaScript库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4.将HTML列表转换为一个无限的自动转盘。

// override the transition speed here
var timer = 4000;
 
var i = 0;
var max = $('#myCarousel > li').length;
 
$("#myCarousel > li").eq(i).addClass('active').css('left','0');
$("#myCarousel > li").eq(i + 1).addClass('active').css('left','25%');
$("#myCarousel > li").eq(i + 2).addClass('active').css('left','50%');
$("#myCarousel > li").eq(i + 3).addClass('active').css('left','75%');
 
 
setInterval(function(){ 
 
  $("#myCarousel > li").removeClass('active');
 
  $("#myCarousel > li").eq(i).css('transition-delay','0.25s');
  $("#myCarousel > li").eq(i + 1).css('transition-delay','0.5s');
  $("#myCarousel > li").eq(i + 2).css('transition-delay','0.75s');
  $("#myCarousel > li").eq(i + 3).css('transition-delay','1s');
 
  if (i < max-4) {
    i = i+4; 
  }
 
  else { 
    i = 0; 
  }  
 
  $("#myCarousel > li").eq(i).css('left','0').addClass('active').css('transition-delay','1.25s');
  $("#myCarousel > li").eq(i + 1).css('left','25%').addClass('active').css('transition-delay','1.5s');
  $("#myCarousel > li").eq(i + 2).css('left','50%').addClass('active').css('transition-delay','1.75s');
  $("#myCarousel > li").eq(i + 3).css('left','75%').addClass('active').css('transition-delay','2s');
 
}, timer);

预览截图

带渐变过渡 无限自动旋转木马