笔记本电脑或是台式机

互联网

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 结构