今天带来一个非常简单的一个轮播图切换的组件,没有多余代码,非常适合新手或者懒人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}