jCarouselLite¤Îauto¤Ë¤ÆÄä»ß/ºÆ¥¹¥¿¡¼¥È¤Ç¤­¤ë¤è¤¦¤Ë¤¹¤ë¥¢¥¯¥»¥·¥Ó¥ê¥Æ¥£Âбþ http://www.ark-web.jp/accessibility/2304.html

[edit]

¤Ï¤¸¤á¤Ë

¤³¤ó¤Ë¤Á¤Ï¡¢Ãݼ¤Ç¤¹¡£

ºÇ¶á¡¢jCarouselLite ¤ÎÍøÍÑÉÑÅ٤ι⤯¤Ê¤Ã¤Æ¤­¤Æ¤¤¤Þ¤¹¡£
jCarouselLite ¤Ï¡¢É½¼¨¥¨¥ê¥¢¤¬¸Â¤é¤ì¤Æ¤¤¤ë¾ì½ê¤Ç¿¤¯¤Î²èÁü¥Ð¥Ê¡¼¤òɽ¼¨¤Ç¤­¤ë¥¦¥£¥¸¥§¥Ã¥È¤Ç¤¹¡£
²¼µ­¤Î¤è¤¦¤Ê¤â¤Î¤Ç¤¹¡£

http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/normal.html

º¸±¦¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È²èÁü¥Ð¥Ê¡¼¤¬¥¹¥¯¥í¡¼¥ë¤·¤Æɽ¼¨¤µ¤ì¤Æ¤¤¤ë

jCarouselLite¤Î¸ø¼°¥µ¥¤¥È¡§http://gmarwaha.com/jquery/jcarousellite/

jCarouselLite ¤Ï²èÁü¥Ð¥Ê¡¼¤ò»ØÄꤷ¤¿ÉÿôÂԤäƤ«¤é¼«Æ°Åª¤Ë¥¹¥¯¥í¡¼¥ë¤¹¤ëµ¡Ç½¤¬¤¢¤ê¤Þ¤¹¡£
¤³¤ì¤Ë¤è¤Ã¤Æ¡¢¥Ü¥¿¥ó¤ò²¡¤µ¤Ê¤¯¤Æ¤â¥ë¡¼¥×ºÆÀ¸¤µ¤ì¤ë¤Î¤Ç¥¢¥¯¥Æ¥£¥Ö´¶¤¬ÆÀ¤é¤ì¤ë¤Î¤ÏÎɤ¤¤Î¤Ç¤¹¤¬¡¢
¼«Æ°Åª¤Ë¥ë¡¼¥×ºÆÀ¸¤Ç¤­¤ë¤¯¤»¤Ë¡¢Ää»ß¤äºÆ¥¹¥¿¡¼¥È¤Îµ¡Ç½¤¬¤¢¤ê¤Þ¤»¤ó¡£

¤³¤ì¤Ç¤Ï¡¢JIS X 8341-3:2009 7.2.2.2 (WCAG 2.0 2.2.2, 2.2.3)¤ËŬÍѤǤ­¤Ê¤¤¤¿¤á¡¢²þ½¤¤·¤Þ¤·¤¿¡£

¸½ºß¤Ï¡¢github¤«¤é¥À¥¦¥ó¥í¡¼¥É¤Ç¤­¤ë¤è¤¦¤Ë¤·¤Æ¤¤¤Þ¤¹¡£

http://github.com/tiadeen2/jCarouselLite_auto_controller

[edit]

Ìܼ¡

[edit]

¤Ê¤¼ jCarousel ¤ò»È¤ï¤Ê¤¤?

auto¤ÎÄä»ß/ºÆ¥¹¥¿¡¼¥È¤Ï¼Â¤Ï jCarousel (http://sorgalla.com/jcarousel/ ) ¤Ë¼ÂÁõ¤·¤Æ¤¢¤ê¤Þ¤¹¡£
¡Ä¤¬¡¢¤Ê¤¼ jCarousel ¤ò»È¤ï¤Ê¤¤¤Ç¡¢jCarouselLite ¤Ë¤³¤À¤ï¤ë¤«¡¢¤È¤¤¤¦¤È´û¤Ë jCarouselLite ¤ò»È¤Ã¤Æ¼ÂÁõ¤·¤¿¥µ¥¤¥È¤¬¤¢¤ë¤«¤é ¤Ç¤¹¡£

jCarouselLite¤Ï jCarousel¤è¤êƳÆþ¤¬´Êñ¤Ç¤¹¡£¤è¤Ã¤Æ¡¢´û¤Ë¼ÂÁõºÑ¤ß¤Î¤â¤Î¤ò¥ê¥×¥ì¥¤¥¹¤¹¤ë¤è¤ê¤Ï
µ¡Ç½¤Îº¹Ê¬¤ò¥×¥é¥¹¤·¤¿Êý¤¬¤ä¤ê°×¤¤¤ÈȽÃǤ·¤Þ¤·¤¿¡£

[edit]

¥¤¥ó¥¹¥È¡¼¥ëÊýË¡

[edit]

Äɲä·¤¿Option

4¤ÄÄɲ䷤Ƥ¢¤ê¤Þ¤¹¡£

btnStart, btnStop ¤Ï¡¢btnPrev, btnNext ¤ÈƱ¤¸¤è¤¦¤Ë¡ÖElement̾¡×¤ò»ØÄꤷ¤Þ¤¹¡£
afterStop, afterStart ¤Ï¡¢afterEnd ¤ÈƱ¤¸¤è¤¦¤Ë¡ÖÄä»ß»þ¡¢ºÆÀ¸»þ¤Ë¸Æ¤Ó½Ð¤µ¤ì¤ë¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô¡×¤ò»ØÄꤷ¤Þ¤¹¡£

[edit]

¥µ¥ó¥×¥ë

¤³¤Î¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô¤Ç¡¢ºÆÀ¸¥Ü¥¿¥ó¤òÄä»ß¥Ü¥¿¥ó¤Ëº¹¤·Âؤ¨¤¿¤ê¤¹¤ë¤³¤È¤¬¤Ç¤­¤Þ¤¹¡£
²¼µ­¤Î¤è¤¦¤Ê´¶¤¸¤Ç¤¹¡£

 <script type="text/javascript">
 $(".jcarousellite").jCarouselLite({
   btnNext: ".next",
   btnPrev: ".prev",
   auto: 1000,
   btnStart: ".start",
   btnStop:  ".stop",
   afterStart: function() {
     $(".start").css("display", "none");
     $(".stop").css("display", "block");
   },
   afterStop: function() {
     $(".start").css("display", "block");
     $(".stop").css("display", "none");
   }
 });
 </script>
 ¡§
 <style type="text/css">
 .start {display:none}
 </style>
 ¡§
 <div class="jcarousellite">
 <div class="controller">
   <button class="prev">Á°¤Ø</button>
   <button class="stop">Ää»ß</button>
   <button class="start">ºÆÀ¸</button>
   <button class="next">¼¡¤Ø</button>
 </div>
 <div class="carousel">
   <ul>
   <li><img src="example1.jpg" alt="example1" /></li>
   <li><img src="example2.jpg" alt="example2" /></li>
   <li><img src="example3.jpg" alt="example3" /></li>
   </ul>
 </div>
 </div>

¾åµ­¥³¡¼¥É¤Î¼ÂºÝ¤Î¥µ¥ó¥×¥ë¤Ï¢­¤³¤Á¤é¤Ë¤¢¤ê¤Þ¤¹¡£
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/

Ää»ß¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¼«Æ°¥¹¥¯¥í¡¼¥ë¤¬»ß¤Þ¤ê¡¢¼êÆ°¤ÇÁ°¸å¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤·¤Æ¤â¡¢Ää»ßÃæ¤Ï¼«Æ°¥¹¥¯¥í¡¼¥ë¤Ë¤Ï¤Ê¤ê¤Þ¤»¤ó¡£ºÆÅÙ¼«Æ°¥¹¥¯¥í¡¼¥ë¤Ë¤¹¤ë¤Ë¤Ï¡¢ºÆÀ¸¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤·¤Þ¤¹¡£
[edit]

¥À¥¦¥ó¥í¡¼¥É

¾åµ­¤Ë½ñ¤­¤Þ¤·¤¿¤¬¡¢github¤«¤é¥À¥¦¥ó¥í¡¼¥É¤Ç¤­¤ë¤è¤¦¤Ë¤·¤Æ¤¤¤Þ¤¹¡£

http://github.com/tiadeen2/jCarouselLite_auto_controller

[edit]

¤µ¤¤¤´¤Ë

º£²ó¤Î¼ÂÁõ¤Ë¤ÏWAI-ARIA¤Ø¤ÎÂбþ¤Ê¤É¤Ï´Þ¤Þ¤ì¤Æ¤¤¤Þ¤»¤ó¡£
¼ÂÁõ¤Î¥¢¥é¤òõ¤»¤Ð¿§¡¹¤¢¤ë¤È»×¤¤¤Þ¤¹¤¬¡¢¤Á¤ç¤Ã¤È¤º¤ÄÂбþ¤·¤Æ¡¢
¤½¤ì¤ò¸ø³«¤·¤Æ¤¤¤±¤ì¤Ð¤È»×¤Ã¤Æ¤¤¤Þ¤¹¡£

Åê¹Æ¼ÔÃݼ | ¥Ñ¡¼¥Þ¥ê¥ó¥¯

| ¤³¤Î¥¨¥ó¥È¥ê¤ò¤Ï¤Æ¤Ê¥Ö¥Ã¥¯¥Þ¡¼¥¯¤ËÅÐÏ¿

Tag: JavaScript, jQuery


źÉÕ¥Õ¥¡¥¤¥ë: filesample_acc.jpg 886·ï [¾ÜºÙ] filesample_nomal.jpg 846·ï [¾ÜºÙ]

¥È¥Ã¥×   ÊÔ½¸ Åà·ë º¹Ê¬ ¥Ð¥Ã¥¯¥¢¥Ã¥× źÉÕ Ê£À½ ̾Á°Êѹ¹ ¥ê¥í¡¼¥É   ¿·µ¬ °ìÍ÷ ñ¸ì¸¡º÷ ºÇ½ª¹¹¿·   ¥Ø¥ë¥×   ºÇ½ª¹¹¿·¤ÎRSS
Last-modified: 2009-09-24 (ÌÚ) 15:11:02 (5495d)

¥¢¡¼¥¯¥¦¥§¥Ö¤Î¥µ¡¼¥Ó¥¹¤ä¥½¥ê¥å¡¼¥·¥ç¥ó¤Ï¤³¤Á¤é