注本頭條號(hào)，專注做前端

今天要分享的是一款特別的 html5/css3 焦點(diǎn)圖效果，不依賴jquery，全程JS 手寫，代碼量不大，百行左右，它的特別之處在于 可以多維度的切換

誰(shuí)說(shuō)程序員沒(méi)有情調(diào)？ 拿這個(gè)去給女票定制個(gè)專屬相冊(cè)吧

//

lexslider是一款基于的jQuery內(nèi)容滾動(dòng)插件。可以使用它輕松實(shí)現(xiàn)各種圖片輪播效果、焦點(diǎn)圖效果。而且可以自動(dòng)播放，使用導(dǎo)航按鈕和鍵盤來(lái)控制。可定制性非常高。

效果圖：

具有特征：

支持圖文混排，html元素。

支持滑動(dòng)和淡入淡出效果。

支持水平、垂直方向滑動(dòng)。

支持鍵盤方向鍵控制。

支持觸控滑動(dòng)。

自適應(yīng)屏幕尺寸。

可控制滑動(dòng)單元個(gè)數(shù)。

更多選項(xiàng)設(shè)置和回調(diào)函數(shù)。

Flexslider的使用方法：

首先載入jquery庫(kù)文件和Flexslider插件，還有Flexslider所需的基本css樣式文件。

HTML代碼：

我們使用了.flexslider來(lái)包括所有需要滾動(dòng)的內(nèi)容元素，然后使用<ul class="slides">這個(gè)class非常關(guān)鍵，內(nèi)部的滾動(dòng)內(nèi)容都是針對(duì).slides的，然后在<li>內(nèi)部加入任意html元素，包括圖片和文字。

JQuery調(diào)用Flexslider插件非常簡(jiǎn)單，使用如下代碼：

參數(shù)選項(xiàng)：