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

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

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

引入

<link href="css/slick.css" rel="stylesheet" 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" id="wrapper"> //给大盒子添加slick类名
<div> //这个div 是必须加上的 slick 会在这个空div上自动生成样式 所以必须在你所需要滚动的模块上面 添加一个空的div
<div class="on" style="width: 450px">
<a href="bespeak.html">
<img src="data: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="data: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="data: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="data:images/1.jpg" alt=""></div>
<div><img src="data:images/2.jpg" alt=""></div>
<div><img src="data:images/3.jpg" alt=""></div>
<div><img src="data:images/4.jpg" alt=""></div>
<div><img src="data:images/5.jpg" alt=""></div>
<div><img src="data: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旋转木马效果插件案例的更多相关文章

  1. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  2. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  3. 用jQuery实现旋转木马效果(带前后按钮和索引按钮)

    项目中要用到旋转木马效果,一共5张图片轮播,并且点击对应的索引按钮能切换到对应的图片.本效果实在jquery.carousel.js插件的基础上做了一些改进,以实现上述需求. 效果图如下: 代码: H ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  6. 介绍一个基于jQuery的Cookie操作插件

    在网页客户端,我们经常会遇到读取或者设置cookie的情况,如果用纯生的js我们可能会遇到一些兼容性带来的麻烦,这里给大家介绍一个比较实用jquery操作cookie的插件,插件的源代码如下: jQu ...

  7. jquery实现旋转木马的插件slick

    旋转木马的是一般网站上都会有的图片轮播效果, html: <section id="features" class="blue" style=" ...

  8. jquery 提示简单效果插件 cluetip

    介绍一个不错的jquery插件-cluetip 我们在做web项目的时候,经常会使用到提示效果.html自带的提示效果是label标签的title,但是这个效果过于简单和难看,并且不方便调整样式. 今 ...

  9. JQuery——banner旋转木马效果

    博主在浏览网页时无意间发现了一种banner图的轮播方式--像旋转木马一样的轮播方式,博主感觉非常新颖独特,经过查阅资料,观看某课网教程总算搞了出来的,其原理主要利用了JQuery代码实现,好了不多说 ...

随机推荐

  1. Alamofire 4.0 迁移指南

    Alamofire 4.0 是 Alamofire 最新的一个大版本更新, 一个基于 Swift 的 iOS, tvOS, macOS, watchOS 的 HTTP 网络库. 作为一个大版本更新, ...

  2. Spark SQL原理及实战

    一.Spark SQL的发展 1.spark SQL和shark SparkSQL的前身是Shark,给熟悉RDBMS但又不理解MapReduce的技术人员提供快速上手的工具,Hive应运而生,它是当 ...

  3. javascript与java编码互转

    java:java.net.URLEncoder.encode(s, "UTF-8");java.net.URLDecoder.decode(chezhanInEn,"U ...

  4. Bootstrap入门(二十五)JS插件2:过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  5. Bootstrap入门(十四)组件8:媒体对象

    Bootstrap入门(十四)组件8:媒体对象 这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等). 1.基本样式 2. ...

  6. PowerDesigner如何把建好的表导入到数据库中,并且把注释也导入进去

    第一次接触这个软件,经过自己的捣鼓和百度,终于可以顺利的导入数据库中了,好开森,希望可以帮助到更多人. 数据库(mysql)其实和sqlserver差不多,以16.5版本为例 1.选中一个PDM项目, ...

  7. 故障排查实战案例——某电器ERP系统日志暴增

    前言 本篇文章写在新春佳节前夕,也是给IT运维朋友一个警醒,在春节长假前请妥善体检自己的系统安心过个年. 千里之堤毁于蚁穴,一条看似简单的语句就能拖垮整个系统,您的SQL Server很久没体检了吧? ...

  8. HDU5842

    Lweb and String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  9. Cms 总结(转)

    提起开源cms,大家第一想到的是php的cms,因为php开源的最早,也最为用户和站长们认可,随着各大cms系统的功能的不断完善和各式各样的开源cms的出现,.net和java的高端的cms系统也逐渐 ...

  10. 不要怂,就是GAN (生成式对抗网络) (四):训练和测试 GAN

    在 /home/your_name/TensorFlow/DCGAN/ 下新建文件 train.py,同时新建文件夹 logs 和文件夹 samples,前者用来保存训练过程中的日志和模型,后者用来保 ...