讲一个使用jquery-slick旋转木马效果插件案例

效果展示连接 http://www.jqcool.net/demo/201405/jquery-slick/

今天刚接触这个插件,被这插件搞的大脑风暴了 所以来记录一下使用方法

首先注意一点 不特别标注 slide:'li' 就只对div管用 

引入

<link href="css/slick.css"  type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/slick.js"></script>

要记得引入他的css和js 还有jq 注意顺序

HTML部分

 <div class="nav_yysj slick" > //给大盒子添加slick类名
<div> //这个div 是必须加上的 slick 会在这个空div上自动生成样式 所以必须在你所需要滚动的模块上面 添加一个空的div
<div class="on" style="width: 450px"> <a href="bespeak.html"> <img src="images/nav_01.png" alt="" width="420" height="220"/> <span class="car_list_logo">BWM x6</span> <span class="sjia"> 试驾 </span> </a> </div> </div> <div> <div style="width: 420px"> <a href="bespeak.html"> <img src="images/nav_01.png" alt="" width="450" height="220"/> <span class="car_list_logo">BWM x6</span> <span class="sjia"> 试驾 </span> </a> </div> </div> <div> <div class="on" style="width: 420px"> <a href="bespeak.html"> <img src="images/nav_01.png" alt="" width="450" height="220"/> <span class="car_list_logo">BWM x6</span> <span class="sjia"> 试驾 </span> </a> </div> </div> <div> <div class="on last_li" style="width: 420px"> <a href="baoma.html"> <span class="car_list_logo">查看更多 <i></i></span> <span class="sjia"></span> </a> </div> </div> </div>

js部分

$(function(){
        $('.slick').slick({
            infinite: true,//是否循环播放
            speed: 300,//速度
            slidesToShow: 1,//单个展示模块 1
            touchMove: false,
            slidesToScroll: 1//每次滑动展示模块 1个
        });
    });

这些都不是最让人头疼 最让人头疼就是 样式 因为我本身使用的是ul li,效果采用jquery.touchSwipe.min.js实现 ,但是这个滑动会有一点点卡卡的 所以换成了这个 

.slick{
给大盒子 定下尺寸 width: 750px; margin: 0 auto; } .slick-slide{ width: 450px; height: 203px; /* margin-right: 23px;*/
这个slick-slide是每一个滑动模块外层空div的class 也是判断是否绑定上滑动方案的方法 在这里不能添加 margin 因为 最大层.slick里面会生成一个div
这个div会自动添加类名slick-list draggable然后这个下面会生成一个div slick-track,
    div slick-track他用来承载要滚动的每一个小块,他的宽度是根据里面的slick-slide的width大小确定 不计算margin 
    如果超出 一行就会放不下 所以就不可以在这个类名上使用margin值
   } 
#overflow .nav_yysj div.slick-active a{ width: 420px; height: 220px; margin-top: -10px; //slick-active是选中状态要有样式 注意优先级}
#overflow .nav_yysj div.slick-track{ background: transparent; height: 203px; } //.slick-track 可能因为样式的问题出现白色背景 所以设置为透明
slick-center{ height: 220px; margin-top: -10px; } //这个是你用了有center类名的那个js代码时候才使用的 
.slick-center a{ height: 220px; }
.slick-list{ width: 450px; overflow: visible; padding: 0;这个主要是用来使超过部分被看到 和设计的样式有关 与slick没多大关系 }
.slick-cloned{ width: 450px; height: 203px; 这个样式每一个不被选中的样式}

下面粘贴一个简单的例子 以供回忆

HTML部分

<div class="slick">
    <div><img src="images/1.jpg" alt=""></div>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
    <div><img src="images/6.jpg" alt=""></div>
</div>

JS部分

$(function(){
$('.slick').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});

CSS部分

.slick{width: 750px;margin: 0 auto;}
.slick-slide{border-bottom: 2px solid blue;} 其它为蓝色底边框
.slick-center{ border: 2px solid red;被选中的 为红色边框 }

写好以后,检查会发现 你的结构会变成下图

讲一个使用jquery-slick旋转木马效果插件案例

自动生成了三层结构

效果图为

讲一个使用jquery-slick旋转木马效果插件案例

更多相关文章
  • WebUI Popover是一个轻量级的jQuery弹出插件,提高引导弹出和一些很棒的新功能了,下面我们来看一个关于jQuery弹出信息插件WebUI Popover使用教程. WebUI Popover是一个轻量级的jQuery弹出信息插件,配合Bootstrap使用,能制作一些很棒的新功能效果, ...
  • jQuery的图片放大镜效果插件-elevateZoom
    日期:2013-1-20  来源:GBin1.com 在线演示 还记得上次我们分享的jQuery放大镜效果插件 - Melens吗?能够帮助你快速简单的搭建类似淘宝中货品大图查看效果.这里继续介绍另外一款超棒的图片缩放(放大镜效果)的jQuery插件 - elevateZoom. 主要特性: 高度可 ...
  • 分享一个jQuery动态网格布局插件:Masonry
    日期:2011/12/01  来源:GBin1.com 在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将 ...
  • 本文章收藏了一款超漂亮的jquery 音乐播放器效果插件哦,利用了jquery的音乐播放器插件做起在线音乐播放功能实在是方便了N多哦,下面来看看代码吧.<!doctype html public '-//w3c//dtd xhtml 1.0 transitional//en' 'http:// ...
  • jQuery自定义滚动条样式插件mCustomScrollbar
    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是 ...
  • 本文章来给大家推荐一款不错的jQuery Datepicker 日期选择插件,本人测试过兼容 WordPress 和 WPML效果,希望些方法对各位有所帮助.1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后下载datepicker( ...
  • 基于jquery AutoComplete 自动完成插件
    收集了国外几款实用的jquery AutoComplete 自动完成插件代码,有需要的朋友可以参考用一下,很像baidu,google的下拉效果.AutoComplete - 自动完成插件(2) 1)AutoSuggest能够将任意常规文本输入框变成一个标签自动完成输入框.它将动态创建函数所需的所有 ...
  • LightBox 灯箱效果插件
    一款基于jquery 的LightBox 灯箱效果插件效果,与使用实例,有需要的朋友参考一下.8)YoxView是一个可以灵活定制的jQuery图片查看插件(Lightbox),用于展示单张或多张图片.可以在一个模式对话框中利用向前/向后按纽或slideshow的方式浏览图片.YoxView支持在同 ...
  • jQuery表单验证插件jqBootstrapValidation使用示例
    jqBootstrapValidation是一个bootstrap表单的jQuery验证插件了,与以往的验证插件有一些区别了,下面小编为各位介绍一下插件的用法.jqBootstrapValidation是一个bootstrap框架样式表单的jQuery验证插件,他能够验证基本的表单字段类型,比如电子 ...
一周排行