html轮播图代码自适应,【简易轮播代码】自适应全屏轮播banner图切换代码

今天带来一个非常简单的一个轮播图切换的组件，没有多余代码，非常适合新手或者懒人IT工作者。

首先要在header头部引入jquery.min.js和jquery.jslides.js，文末有下载链接。

HTML部分：

CSS部分：

#banner { width:100%; height:400px; float:left; position:relative}

#banner #slides { display:block; width:100%; height:400px; list-style:none; padding:0; margin:0; position:relative}

#banner #slides li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute}

#banner #slides li a { display:block; width:100%; max-height:100%; text-indent:-9999px}

#banner #pagination { display:block; list-style:none; position:absolute; left:50%; bottom: 20px; z-index:9900; padding:5px 15px 5px 0; margin:0}

#banner #pagination li { display:block; list-style:none; width:10px; height:10px; float:left; margin-left:15px; border-radius:5px; background:#FFF }

#banner #pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;}

#banner #pagination li.current { background:#0092CE}