cxSlide 是一個簡單易用的焦點圖展示插件，支持水平、縱向切換，透明過渡切換。

已支持 CSS 動畫過渡切換。通過 CSS 動畫切換，可以展示更多效果。

本經驗分享使用 cxSlide插件實現焦點圖輪換

工具/原料

筆記本電腦或是臺式機

互聯網

jQuery cxSlide

方法/步驟

下載cxSlide插件，如下圖所示。

cxSlide插件 圖片輪播效果，如下圖所示。

載入 JavaScript 文件

CSS 樣式結構

除必要屬性設置外，其他樣式均可自行設置。

/** * cxSlide 基本樣式 * width 和 height 根據需求設置 */ .cxslide{position:relative;width:600px;height:280px;} .cxslide .box{} .cxslide .list{} .cxslide .list li{} .cxslide .btn{} .cxslide .btn li{} .cxslide .btn li.selected{} .cxslide .minus{} .cxslide .plus{}

/* 橫向過渡 type: 'x' */ .cxslide .box{overflow:hidden;width:600px;height:280px;} .cxslide .list{overflow:hidden;width:9999px;} .cxslide .list li{float:left;position:relative;width:600px;}

/* 縱向過渡 type: 'y' */ .cxslide .box{overflow:hidden;width:600px;height:280px;} .cxslide .list{overflow:hidden;height:9999px;}

/* 透明過渡 type: 'fade' */ .cxslide .box{overflow:hidden;position:relative;width:600px;height:280px;}

DOM 結構

調用方式

$('#element_id').cxSlide();

動畫切換

畫面進入時