组件名:yijs.Carousel
版本:0.1
描述:之前也曾写过一个图片滚动的组件,但只支持单层(可以看下博客首页的图片滚动),现在写了个新的图片滚动(实际上滚动的是层,所以内部的内容可以自由写入。),支持任意多个滚动,目前版本,只预留的分页接口,将在下一个版本中,加入分页的功能
使用教程
创建如下html结构:
- <ul id="carousel">
- <li><img src="images/test1.jpg" width="212" height="114" title="测试1" /><p>测试1</p></li>
- <li><img src="images/test2.jpg" width="212" height="114" title="测试2" /><p>测试2</p></li>
- <li><img src="images/test3.jpg" width="212" height="114" title="测试3" /><p>测试3</p></li>
- <li><img src="images/test1.jpg" width="212" height="114" title="测试4" /><p>测试4</p></li>
- <li><img src="images/test2.jpg" width="212" height="114" title="测试5" /><p>测试5</p></li>
- <li><img src="images/test3.jpg" width="212" height="114" title="测试6" /><p>测试6</p></li>
- <ul>
很简单的结构,一个ul解决问题,id必须指定
初始化组件:
- var Carousel = new yijs.Carousel({applyTo:'#carousel',
- width:740,
- height:230,
- liHeight:150,
- liWidth : 200,
- liMarginRight : 20,
- speed : 'slow'});
- Carousel.render();
下一个版本将给js加入详细的注释,这里先不贴出js部分,有兴趣的可以下载下来看。


