可自动放大可全屏播放的轮换图模板大放送

返回模板与插件交流区
分享
0回复贴，共1页，点击数:1646
只看楼主
djyu620
想在Zoomla!逐浪cms做的站上有更好的表现效果，比如下面的这个效果就很美，有没有办法整合进来？
答案是肯定的！


[attachimg]17611[/attachimg]
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>可自动放大可全屏播放的轮换图</title>
  6. <script type="text/javascript" src="js/jquery.min.js"></script>
  7. <script type="text/javascript" src="js/tiksluscarousel.js"></script>
  8. <link rel="stylesheet" href="css/tiksluscarousel.css" />
  9. </head>
  10. <body>
  11. <!-- 代码 开始 -->
  12. <div id="fruits">
  13. <ul>
  14. <li><img src="images/fruits1.jpg" /></li>
  15. <li><img src="images/fruits2.jpg" /></li>
  16. <li><img src="images/fruits3.jpg" /></li>
  17. <li><img src="images/fruits4.jpg" /></li>
  18. <li><img src="images/fruits5.jpg" /></li>
  19. </ul>
  20. </div>
  21. <script language="javascript">
  22. $(document).ready(function(){
  23. $("#fruits").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1,type:'zoom'});
  24. });
  25. </script>
  26. <!-- 代码 结束 -->
  27. </body>
  28. </html>
  29. JQuery要点：


  32. //自动放大
  33. var showCaption = function(n) {

  35. var li = carousel.find("li:nth-child(" + n + ")");
  36. var caption = li.find(".caption");
  37. var slideleft=100/count;
  38. if (caption.hasClass("animated")) {
  39. caption.removeClass("animated").removeClass(options.customAnimationCaption);
  40. }

  42. if (options.customAnimationCaption != '') {
  43. var l=li.position().left;
  44. li.find(".caption").css({left:l+"px",fontSize:carousel.width()*options.captionFontRatio + "%"});
  45. li.find(".caption").addClass(options.customAnimationCaption).addClass("animated").show();


  48. }else{


  51. li.find(".caption").css({left: 101+"%",fontSize:carousel.width()*options.captionFontRatio + "%"}).show().animate({left: (options.current*slideleft - slideleft) + "%"}, 1500);


  54. }
  55. };
  56. //上一张和下一张图片链接
  57. var navIcons=function(){
  58. var nav_left=carousel.find(".nav_left");
  59. var nav_right=carousel.find(".nav_right");
  60. if(options.current<=1){ ;nav_left.hide();}else{nav_left.show();}
  61. if(options.current>=count){nav_right.hide();}else{nav_right.show();}
  62. if(options.navIcons==true){
  63. //nav_left.show();nav_right.show();
  64. nav_right.find("span").hide();
  65. nav_left.find("span").hide();
  66. if(!nav_right.hasClass("navIcons")){nav_right.addClass("navIcons");}
  67. if(!nav_left.hasClass("navIcons")){nav_left.addClass("navIcons");}
  68. if(options.current<count){
  69. var tn=parseInt(options.current) + 1;
  70. if(!nav_right.hasClass("navIcons_next")){nav_right.addClass("navIcons_next");}
  71. nav_right.html("").append(ul.find("li:nth-child("+(tn) + ")").html());
  72. nav_right.find("img.tslider").removeClass("tslider");
  73. }
  74. if(options.current>1){
  75. var tp=parseInt(options.current-1);
  76. if(!nav_left.hasClass("navIcons_prev")){nav_left.addClass("navIcons_prev");}
  77. nav_left.html("").append(ul.find("li:nth-child("+(tp) + ")").html());
  78. nav_left.find("img.tslider").removeClass("tslider");
  79. }
  80. }
  81. };
复制代码
完整模板点附件下载就可以了：
[attach]17603[/attach]
1楼 2014/09/29 10:05
您未登录,没有发贴权限[点此登录]