旋转木马的是一般网站上都会有的图片轮播效果,
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-width:704px;">
</div>
</div>
</section>
js需要引入的文件:
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="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());
},
}); },