当前位置: 代码迷 >> .NET相关 >> jCarousel3图横向滚动效果_可自动或手动,支持描述信息收缩展示功能
  详细解决方案

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

热度:158   发布时间:2016-04-24 02:50:49.0
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 item19         </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.loadJcarousel45     });46     $('#Hold_ClientID_divJcarousel').css('visibility', 'visible');47 });48 */
(jCarousel库扩展)Effect Image:(请点击进行下载)
 
(基于jQuery的预览图展示特效代码)Effect Image:(请点击进行下载)

 
(鼠标经过弹出图片信息)Effect Image:(请点击进行下载)
  相关解决方案