jquery实现旋转木马的插件slick

旋转木马的是一般网站上都会有的图片轮播效果，

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需要引入的文件：

具体的参数：可以直接看这个

http://www.jq22.com/jquery-info406

参数说明一下：在参数中有方法这一类

比如slickPrev这样用

$('.slick-prev').click(function(){
$(".slick-prev").slick('slickPrev');
});

插件下载地址：

https://github.com/GainLoss/jquery_slick

不定时的更新一些例子:

如果想要的是这种样式的旋转木马的话：可以正常的自动轮播。轮播的时候上面的内容和下面当前的是对应的,而且可以左右切换。

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());
          },
        });
        
        
    },

jquery实现旋转木马的插件slick

相关推荐