講一個使用jquery-slick旋轉木馬效果插件案例

效果展示連接 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="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;被選中的 為紅色邊框 }

寫好以后，檢查會發現 你的結構會變成下圖

自動生成了三層結構

效果圖為