jquery圖片輪播效果(unslider)

今天做網站（住建局網站）需要用到圖片輪播，剛開始想借鑒DTCMS上的，查看CSS與頁面代碼，呵呵，不復雜，直接復制過來，結果調整半天，頁面還是各種亂，沒辦法，網上找一個吧，於是找到了今天要說的這貨unslider.js。

網址：http://www.bootcss.com/p/unslider/

效果預覽：

在此要批評下unslider的制作人員，好壞在網站上提交個demo啊，讓用的人可以直接下載查看效果，同時可以參考啊，可是沒有，呵呵，如果他們有時間應該做一個的，我到是想給他們做一個，又擔心人家不要，要是要的話，聯系我，我把我的demo給你們傳上去，git上提供的那個貌似demo，可是下載下來不能運行，也許是我的錯，不管怎樣，我搞定了，下面是心中歷程。

官方的說明還是相當簡單的，共4步

1、引用js，這都能看懂，不過要是你覺得網慢，把這兩貨下載下來，可能會好點，另外unslider.js有壓縮版的，比這個小幾k吧，雖然差別不大，但引用的多了，就有作用了，呵呵總共才幾k。

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

 

2、頁面中添代碼

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>

 

此處要說明下，如果大家要放圖片，那么直接放li內就可以，也就是所有你需要輪播的東西都 放這里邊就可以了。

3、添加CSS

.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }

 

簡單吧，就這幾行，不過絕對能起作用，我當時稍改了下

4、開閘放水

.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }

 

就這一行是絕對可以搞定的，我為了顯示圓點可以點擊的效果，開放了一個屬性，具體細節參考官方文檔說明吧。

另外，這貨雖然很小，但是像左右箭頭了、鍵盤控制了、輪播速度了，都是支持的，還支持觸摸屏的，等等。

總之，好的東西是要推薦大家使用的，同時好的東西大家也是點贊的，謝謝unslider團隊，給我們做出這么好的東西。