摘要：
顶部的内容对应于下面的当前内容，可以从左向右切换。
旋转木马的是一般网站上都会有的图片轮播效果，
html:
<section id="features"class="blue"style="position:absolute;bottom:50px;left:50%;margin-left:-355px;"> <div class="content"> <div class="slider center"id="sqfw_con"style="height:100px;background:none;min-704px;"> </div> </div> </section>
js需要引入的文件：
<link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/css/style.css">
具体的参数：可以直接看这个
http://www.jq22.com/jquery-info406
参数说明一下：在参数中有方法这一类
比如slickPrev这样用
$('.slick-prev').click(function(){
$(".slick-prev").slick('slickPrev');
});
插件下载地址：
https://github.com/GainLoss/jquery_slick
不定时的更新一些例子:
如果想要的是这种样式的旋转木马的话：可以正常的自动轮播。轮播的时候上面的内容和下面当前的是对应的,而且可以左右切换。
代码的话就可以这样写：显示正确的引入js和css文件，布局什么的是一样的
主要的原因还是在js中：我的这个是基于backbone写的页面，但是思路是一样的
HoverPhoto : function(n,data){ var _this=this; this.slick(); this.$('.slick-prev').click(function(){//左右切换 _this.$(".sqfw_font").empty(); var con=_this.$(".slick-center").prev().find(".sqfw_every").html(); _this.$(".sqfw_font").html(con); }); this.$('.slick-next').click(function(){//左右切换 _this.$(".sqfw_font").empty(); _this.$(".sqfw_font").html(_this.$(".slick-center").next().find(".sqfw_every").html()); }); }, slick : function(){ var _this=this; this.$('.center').slick({ centerMode: true, slidesToShow: 5, centerPadding: '15px', autoplay:true, autoplaySpeed:2000, touchThreshold :1, onBeforeChange : function(){//在切换之前变动 _this.$(".sqfw_font").empty(); _this.$(".sqfw_font").html(_this.$(".slick-center").next().find(".sqfw_every").html()); }, }); },