yijs.Carousel—图片滚动组件(明河作品)

发布于,归属于jquery插件沙发还空着,抢! 共有455人围观    

carousel1

组件名:yijs.Carousel

版本:0.1

描述:之前也曾写过一个图片滚动的组件,但只支持单层(可以看下博客首页的图片滚动),现在写了个新的图片滚动(实际上滚动的是层,所以内部的内容可以自由写入。),支持任意多个滚动,目前版本,只预留的分页接口,将在下一个版本中,加入分页的功能

使用教程

创建如下html结构:

  1. <ul id="carousel">
  2.     <li><img src="images/test1.jpg" width="212" height="114" title="测试1" /><p>测试1</p></li> 
  3.     <li><img src="images/test2.jpg" width="212" height="114" title="测试2" /><p>测试2</p></li> 
  4.     <li><img src="images/test3.jpg" width="212" height="114" title="测试3" /><p>测试3</p></li> 
  5.     <li><img src="images/test1.jpg" width="212" height="114" title="测试4" /><p>测试4</p></li> 
  6.     <li><img src="images/test2.jpg" width="212" height="114" title="测试5" /><p>测试5</p></li> 
  7.     <li><img src="images/test3.jpg" width="212" height="114" title="测试6" /><p>测试6</p></li> 
  8.  <ul>

很简单的结构,一个ul解决问题,id必须指定

初始化组件:

  1. var Carousel = new yijs.Carousel({applyTo:'#carousel',
  2.                             width:740,
  3.                             height:230,
  4.                             liHeight:150,
  5.                             liWidth : 200,
  6.                                     liMarginRight : 20,
  7.                                    speed : 'slow'});
  8.                          Carousel.render();

下一个版本将给js加入详细的注释,这里先不贴出js部分,有兴趣的可以下载下来看。

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)