ÏìӦʽÎÞÏÞÂÖ²¥jQueryÐýתľÂí²å¼þ

µ¼Óï SkidderÊÇÒ»¿îÏìӦʽÎÞÏÞÂÖ²¥µÄjQueryÐýתľÂí²å¼þ¡£Ëü¿ÉÒÔ×Ô¶¯½«Í¼Æ¬¾ÓÖжÔÆ룬×é³ÉÊ×βÏà½ÓµÄÒ»×éͼƬ£¬Í¨¹ýµ¼º½°´Å¥»òÒƶ¯´¥Ãþ»¬¶¯À´Ç°ºóÇл»Í¼Æ¬¡£ËüµÄÌص㻹ÓУºÍ¼Æ¬×Ô¶¯¾ÓÖжÔÆë¡£ÎÞÏÞÑ­»·ÂÖ²¥¡£ÏìӦʽÉè¼Æ
skidder

SkidderÊÇÒ»¿îÏìӦʽÎÞÏÞÂÖ²¥µÄ jQuery ÐýתľÂí²å¼þ¡£Ëü¿ÉÒÔ×Ô¶¯½«Í¼Æ¬¾ÓÖжÔÆ룬×é³ÉÊ×βÏà½ÓµÄÒ»×éͼƬ£¬Í¨¹ýµ¼º½°´Å¥»òÒƶ¯´¥Ãþ»¬¶¯À´Ç°ºóÇл»Í¼Æ¬¡£ËüµÄÌص㻹ÓУº
  • ͼƬ×Ô¶¯¾ÓÖжÔÆë¡£
  • ÎÞÏÞÑ­»·ÂÖ²¥¡£
  • ÏìӦʽÉè¼Æ£¬Í¼Æ¬×Ô¶¯ÊÊÓ¦´°¿Ú´óС¡£
  • ¿ÉÒÔÔÚÒƶ¯É豸ÉÏ´¥Ãþ»¬¶¯¡£
  • ¼æÈÝIE8+µÄIEä¯ÀÀÆ÷¡£

ʹÓ÷½·¨

ʹÓøÃÐýתľÂí²å¼þÐèÒªÔÚÒ³ÃæÖÐÒýÈëjquery.skidder.cssºÍjquery£¬ÒÔ¼°jquery.skidder.jsÎļþ¡£

  1. <link rel="stylesheet" href="path/to/jquery.skidder.css"> 
  2. <script src="path/to/jquery.skidder.js"></script> 
  3. <script src="path/to/jquery.skidder.js"></script>   
 HTML½á¹¹

¸ÃÐýתľÂíµÄ»ù±¾HTML½á¹¹ÈçÏ£º

  1. <div class="slideshow" style="display: none;"> 
  2.   <div class="slide"><img src="1.jpg"></div> 
  3.   <div class="slide"><img src="2.jpg"></div> 
  4.   <div class="slide"><img src="3.jpg"></div> 
  5. </div>    

 ³õʼ»¯²å¼þ

ÔÚÒ³ÃæDOMÔªËؼÓÔØÍê±ÏÖ®ºó£¬Í¨¹ýskidder()·½·¨À´³õʼ»¯¸ÃÐýתľÂí²å¼þ¡£

  1. $('.slideshow').skidder(); 

 

Ҫȷ±£Í¼Æ¬ÔÚ²å¼þ³õʼ»¯Ö®Ç°¾Í±»È«²¿¼ÓÔØ£¬·ñÔò²»ÄÜÕýÈ·µÄ¼ÆËãͼƬµÄ¸ß¶È¡£¿ÉÒÔʹÓÃimagesloaded.jsÀ´Íê³ÉÕâÏ×÷¡£

  1. $('.slideshow').each( function() { 
  2.   var $slideshow = $(this); 
  3.   $slideshow.imagesLoaded( function() { 
  4.     $slideshow.skidder(); 
  5.   }); 
  6. });   

 

Òª¶¯Ì¬¸Ä±äͼƬµÄ³ß´ç´óС£¬²å¼þÖÐʹÓÃÁ˵ÚÈý·½µÄsmartresize£º

  1. $(window).smartresize(function(){ 
  2.   $('.slideshow').skidder('resize'); 
  3. });  

 

 ÅäÖòÎÊý

SkidderÐýתľÂí²å¼þµÄÅäÖòÎÊýÈçÏ£º

²ÎÊý ÃèÊö
slideClass slideÔªËصÄclassÃû³Æ¡£Ä¬ÈÏΪ".slide"
animationType ¸Ã²å¼þÖ§³ÖCSS¶¯»­ºÍjQuery¶¯»­¡£¿ÉѡֵΪ£º 'animate', 'css'¡£Ä¬ÈÏֵΪ 'animate'
lazyLoad ÀÁ¼ÓÔØ£¬Ä¬ÈÏֵΪfalse
lazyLoadAutoInit ĬÈÏֵΪtrue
lazyLoadWindow ĬÈÏֵΪ1
scaleSlides ÊÇ·ñ¸ù¾ÝmaxWidth, maxHeightºÍscaleTo²ÎÊýËõ·ÅslideΪͳһµÄÖµ¡£Ä¬ÈÏΪtrue¡£
scaleTo ¶¨ÒåËõ·Åģʽ¡£ÓÐ2ÖÖģʽ£º×îСģʽºÍÏìӦʽģʽ¡£¿ÉѡֵΪ£º"smallest"ºÍ[x, y]¡£"smallest"±íʾ¸ß¶È×îСµÄͼƬ¾ø¶Ô»ÃµÆƬµÄ¸ß¶È¡£[x, y]±íʾʹÓÃÒ»¸öÊý×éÖеÄÁ½¸öÊýÖµÀ´¶¨Òå»ÃµÆƬµÄ±ÈÀý¡£Ä¬ÈÏΪ"smallest"ģʽ¡£
maxWidth ÏÖÔڻõÆƬµÄ×î´ó¿í¶È£¬0»ò"none"±íʾ²»ÏÞÖÆ¡£Ä¬ÈÏΪ800
maxHeight ÏÖÔڻõÆƬµÄ×î´ó¸ß¶È£¬0»ò"none"±íʾ²»ÏÞÖÆ¡£Ä¬ÈÏΪ500
preservePortrait ÔÚÏìӦʽģʽÖиòÎÊýÓÐЧ¡£¾ö¶¨Ð¡ÓÚ±ÈÀýµÄͼƬµÄÌî³äģʽ¡£true±íʾÊÊÓ¦Êӿڸ߶ȣ¬Ë®Æ½·½ÏòÉÏÁô¿Õ°×¡£Ä¬ÈÏΪfalse¡£
paging ÉèÖÃΪtrueʱ£¬²å¼þ»á²éÕÒpagingElementÔªËصİü¹üÔªËØpagingWrapperÀ´ÉèÖÃpadding¡£Èç¹ûÕâÁ½¸öÔªËز»´æÔÚ£¬²å¼þ»á×Ô¶¯´´½¨ËüÃÇ¡£Ä¬ÈÏΪtrue¡£
pagingWrapper ·ÖÒ³Ô²µãµÄ°ü¹üÔªËØ£¬Ä¬ÈÏΪ'.skidder-pager'
pagingElement ·ÖÒ³Ô²µãÔªËØ£¬Ä¬ÈÏΪ'.skidder-pager-dot'
swiping ÊÇ·ñÔÚÒƶ¯´¥ÃþÉ豸ÉÏÔÊÐíswiping¡£Ä¬ÈÏΪtrue
leftaligned Èç¹û²»Ï£Íû»ÃµÆƬ¾ÓÖУ¬ÉèÖÃΪtrue£¬Ä¬ÈÏΪfalse
cycle ÊÇ·ñÑ­»·ÏÔʾ£¬Ä¬ÈÏΪtrue¡£
jumpback ÔÚ·ÇÑ­»·Ä£Ê½Ê±£¬×îºóÒ»ÕŻõÆƬ»áÏÔʾ'return to first slide'¼ýÍ·¡£Ä¬ÈÏΪfalse
speed ¹ý¶É¶¯»­µÄËٶȣ¬Ä¬ÈÏΪ400
autoplay ÊÇ·ñ×ܲ¥·Å£¬Ä¬ÈÏΪfalse
autoplayResume ÊÇ·ñÔÚ»¥¶¯ºó»Ö¸´×Ô¶¯²¥·Å£¬Ä¬ÈÏΪfalse
interval ×Ô¶¯²¥·ÅµÄʱ¼ä¼ä¸ô£¬Ä¬ÈÏΪ4000
transition ¹ý¶É¶¯»­Ð§¹û£¬'slide' »ò 'fade'
directionClasses ÔÚ¹ý¶É¶¯»­½áÊøºóΪslidesÌí¼Ó 'left-from-active' ºÍ 'right-from-active' classÀà¡£
afterSliding ÐýתľÂí¸Ä±äºóµÄ»Øµ÷º¯Êý
afterInit ÐýתľÂí³õʼ»¯ºóµÄ»Øµ÷º¯Êý
afterResize ÐýתľÂí³ß´ç¸Ä±äʱµÄ»Øµ÷º¯Êý

http://www.aseoe.com/ true ÏìӦʽÎÞÏÞÂÖ²¥jQueryÐýתľÂí²å¼þ http://www.aseoe.com/show-79-817-1.html report <£¿php echo strlen($content) / 2; ?> SkidderÊÇÒ»¿îÏìӦʽÎÞÏÞÂÖ²¥µÄjQueryÐýתľÂí²å¼þ¡£Ëü¿ÉÒÔ×Ô¶¯½«Í¼Æ¬¾ÓÖжÔÆ룬×é³ÉÊ×βÏà½ÓµÄÒ»×éͼƬ£¬Í¨¹ýµ¼º½°´Å¥»òÒƶ¯´¥Ãþ»¬¶¯À´Ç°ºóÇл»Í¼Æ¬¡£ËüµÄÌص㻹ÓУºÍ¼Æ¬×Ô¶¯¾ÓÖжÔÆë¡£ÎÞÏÞÑ­»·ÂÖ²¥¡£ÏìӦʽÉè¼Æ
TAG:ÏìӦʽ jQuery ²å¼þ
±¾Õ¾»¶Ó­ÈκÎÐÎʽµÄתÔØ£¬µ«ÇëÎñ±Ø×¢Ã÷³ö´¦£¬×ðÖØËûÈËÀͶ¯³É¹û
תÔØÇë×¢Ã÷£º ÎÄÕÂתÔØ×Ô£º°®Ë¼×ÊÔ´Íø http://www.aseoe.com/show-79-817-1.html

[Ç°¶Ë²å¼þÍƼö] Plugin

1 2 3 4
  • jQueryʵÏÖÖð×ÖÖð¾äÏÔʾ²å¼þl-by-l.min.js
  • jQuery´ø·½Ïò¸ÐÖªµÄÊó±ê»¬¹ýͼƬ±ß¿òÌØЧ²å¼þ
  • jQuery HotKeys¼àÌý¼üÅÌ°´ÏÂʼþkeydown²å¼þ
  • ÏìӦʽÎÞÏÞÂÖ²¥jQueryÐýתľÂí²å¼þ
ÏìӦʽÎÞÏÞÂÖ²¥jQueryÐýתľÂí²å¼þ
webÇ°¶Ë¿ª·¢
°®Ë¼×ÊÔ´Íø Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(½úICP±¸13001436ºÅ-1)