jCarousel三图横向滚动效果_可自动或手动，支持描述信息收缩展示功能

由于所分享的前端知识，属于跨度几年的个人笔记，只是记载关键代码；并没有针对所做的内容具体场景和需求进行描述，仅供参考。

关键代码：

 1 //html内容

 2 /**

 3 * @author Kenmu

 4 * @time 2011-03-30

 5 * @modified 2014-01-23

 6 * @use imgJcarousel

 7 <div id="Hold_ClientID_divJcarousel" style="visibility: hidden">

 8     <div class="jcarousel">

 9         <ul id="Hold_ClientID_mycarousel" class="jcarousel-list jcarousel-skin-tango">

10             <li><a href="/" target="_blank">

11                 <img src="Styles/1.jpg" alt="" /></a><div class="boxDesc">

12                     <div>

13                         Title(loadBoxDesc)<br />

14                         <span>Other Info(loadBoxDesc)</span></div>

15                     <b></b>

16                 </div>

17             </li>

18             ....more li item

19         </ul>

20     </div>

21 </div>

22 

23 //脚本

24 $(function () {

25     var imgJc1 = new imgJcarousel();

26     imgJc1.isDisplayNav = 1;

27     imgJc1.pageSize = 3;

28     imgJc1.imgWidth = 130;

29     imgJc1.imgHeight = 160;

30     imgJc1.imgPadding = 5;

31     imgJc1.imgHorizontalMargin = 20;

32     imgJc1.navIconWidth = 13;

33     imgJc1.navIconHeight = 13;

34     imgJc1.navNextIconRight = 10;

35     imgJc1.isDisplayBoxDesc = 1;

36     imgJc1.descBeginTop = -50;

37     imgJc1.descEndTop = -175;

38     imgJc1.init('Hold_ClientID_divJcarousel');

39     $('#Hold_ClientID_mycarousel').jcarousel({

40         scroll: 3,

41         visible: 3,

42         //auto: 3,

43         //wrap: 'last',

44         initCallback: imgJc1.loadJcarousel

45     });

46     $('#Hold_ClientID_divJcarousel').css('visibility', 'visible');

47 });

48 */

（jCarousel库扩展）Effect Image:（请点击进行下载）

 

（基于jQuery的预览图展示特效代码）Effect Image:（请点击进行下载）