- Äɲ䵤줿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
- ºï½ü¤µ¤ì¤¿¹Ô¤Ï¤³¤Î¿§¤Ç¤¹¡£
** ¤Ï¤¸¤á¤Ë [#dfbd9cb5]
¤³¤ó¤Ë¤Á¤Ï¡¢Ãݼ¤Ç¤¹¡£
¤³¤ó¤Ë¤Á¤Ï¡¢[[Ãݼ]]¤Ç¤¹¡£
ºÇ¶á¡¢jCarouselLite ¤ÎÍøÍÑÉÑÅ٤ι⤯¤Ê¤Ã¤Æ¤¤Æ¤¤¤Þ¤¹¡£
jCarouselLite ¤Ï¡¢É½¼¨¥¨¥ê¥¢¤¬¸Â¤é¤ì¤Æ¤¤¤ë¾ì½ê¤Ç¿¤¯¤Î²èÁü¥Ð¥Ê¡¼¤òɽ¼¨¤Ç¤¤ë¥¦¥£¥¸¥§¥Ã¥È¤Ç¤¹¡£
²¼µ¤Î¤è¤¦¤Ê¤â¤Î¤Ç¤¹¡£
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/normal.html
#ref(sample_nomal.jpg,nolink,º¸±¦¤Î¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È²èÁü¥Ð¥Ê¡¼¤¬¥¹¥¯¥í¡¼¥ë¤·¤Æɽ¼¨¤µ¤ì¤Æ¤¤¤ë)
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
#blikimore
** Ìܼ¡ [#b79c4176]
#contents
** ¤Ê¤¼ jCarousel ¤ò»È¤ï¤Ê¤¤? [#g38c9b22]
auto¤ÎÄä»ß/ºÆ¥¹¥¿¡¼¥È¤Ï¼Â¤Ï jCarousel (http://sorgalla.com/jcarousel/ ) ¤Ë¼ÂÁõ¤·¤Æ¤¢¤ê¤Þ¤¹¡£
¡Ä¤¬¡¢¤Ê¤¼ jCarousel ¤ò»È¤ï¤Ê¤¤¤Ç¡¢jCarouselLite ¤Ë¤³¤À¤ï¤ë¤«¡¢¤È¤¤¤¦¤È''´û¤Ë jCarouselLite ¤ò»È¤Ã¤Æ¼ÂÁõ¤·¤¿¥µ¥¤¥È¤¬¤¢¤ë¤«¤é'' ¤Ç¤¹¡£
jCarouselLite¤Ï jCarousel¤è¤êƳÆþ¤¬´Êñ¤Ç¤¹¡£¤è¤Ã¤Æ¡¢´û¤Ë¼ÂÁõºÑ¤ß¤Î¤â¤Î¤ò¥ê¥×¥ì¥¤¥¹¤¹¤ë¤è¤ê¤Ï
µ¡Ç½¤Îº¹Ê¬¤ò¥×¥é¥¹¤·¤¿Êý¤¬¤ä¤ê°×¤¤¤ÈȽÃǤ·¤Þ¤·¤¿¡£
** ¥¤¥ó¥¹¥È¡¼¥ëÊýË¡ [#t21c4241]
- jCarouselLite¤ÈƱ¤¸¤Ç¤¹¡£Option ¤¬Áý¤¨¤¿¤À¤±¤È¤¤¤¦Ç§¼±¤ÇOK¤Ç¤¹¡£
** Äɲä·¤¿Option [#n463583f]
4¤ÄÄɲ䷤Ƥ¢¤ê¤Þ¤¹¡£
- btnStart, btnStop :
Ää»ß/ºÆÀ¸¥Ü¥¿¥ó¤ÎElement̾¤ò»ØÄꤹ¤ë¡£auto¥ª¥×¥·¥ç¥ó¤¬null¤Ç¤Ê¤±¤ì¤Ð¡¢¼«Æ°Åª¤ËbtnStart¤ò²¡¤·¤¿µóÆ°¤È¤Ê¤ë¡£
- afterStop, afterStart :
Ää»ß/ºÆÀ¸¥Ü¥¿¥ó¤¬¼Â¹Ô¤µ¤ì¤¿»þ¤Ë¸Æ¤Ó½Ð¤µ¤ì¤ë¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô¤ò»ØÄꤷ¤Æ¤ª¤±¤ë¡£
btnStart, btnStop ¤Ï¡¢btnPrev, btnNext ¤ÈƱ¤¸¤è¤¦¤Ë¡ÖElement̾¡×¤ò»ØÄꤷ¤Þ¤¹¡£
afterStop, afterStart ¤Ï¡¢afterEnd ¤ÈƱ¤¸¤è¤¦¤Ë¡ÖÄä»ß»þ¡¢ºÆÀ¸»þ¤Ë¸Æ¤Ó½Ð¤µ¤ì¤ë¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô¡×¤ò»ØÄꤷ¤Þ¤¹¡£
** ¥µ¥ó¥×¥ë [#qac7fc5b]
¤³¤Î¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô¤Ç¡¢ºÆÀ¸¥Ü¥¿¥ó¤òÄä»ß¥Ü¥¿¥ó¤Ëº¹¤·Âؤ¨¤¿¤ê¤¹¤ë¤³¤È¤¬¤Ç¤¤Þ¤¹¡£
²¼µ¤Î¤è¤¦¤Ê´¶¤¸¤Ç¤¹¡£
<script type="text/javascript">
$(".jcarousellite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 1000,
btnStart: ".start",
btnStop: ".stop",
afterStart: function() {
jQuery(".start").css("display", "block");
jQuery(".stop").css("display", "none");
$(".start").css("display", "none");
$(".stop").css("display", "block");
},
afterStop: function() {
jQuery(".start").css("display", "block");
jQuery(".stop").css("display", "none");
$(".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>
- ºÇ½é¤ÏºÆÀ¸¥Ü¥¿¥ó¤¬É½¼¨¤µ¤ì¤Ê¤¤¤è¤¦¤ËCSS¾å¤Ç .start ¤òÈóɽ¼¨¤Ë¤·¤Æ¤¤¤Þ¤¹¡£
- afterStart, afterStop ¤Î¥³¡¼¥ë¥Ð¥Ã¥¯´Ø¿ô¤Çɽ¼¨/Èóɽ¼¨¤òÆþ¤ìÂؤ¨¤Æ¤¤¤Þ¤¹¡£
¾åµ¥³¡¼¥É¤Î¼ÂºÝ¤Î¥µ¥ó¥×¥ë¤Ï¢¤³¤Á¤é¤Ë¤¢¤ê¤Þ¤¹¡£
http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/
#ref(sample_acc.jpg,nolink,Ää»ß¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤¹¤ë¤È¼«Æ°¥¹¥¯¥í¡¼¥ë¤¬»ß¤Þ¤ê¡¢¼êÆ°¤ÇÁ°¸å¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤·¤Æ¤â¡¢Ää»ßÃæ¤Ï¼«Æ°¥¹¥¯¥í¡¼¥ë¤Ë¤Ï¤Ê¤ê¤Þ¤»¤ó¡£ºÆÅÙ¼«Æ°¥¹¥¯¥í¡¼¥ë¤Ë¤¹¤ë¤Ë¤Ï¡¢ºÆÀ¸¥Ü¥¿¥ó¤ò¥¯¥ê¥Ã¥¯¤·¤Þ¤¹¡£)
** ¥À¥¦¥ó¥í¡¼¥É [#ya1fa04c]
¾åµ¤Ë½ñ¤¤Þ¤·¤¿¤¬¡¢github¤«¤é¥À¥¦¥ó¥í¡¼¥É¤Ç¤¤ë¤è¤¦¤Ë¤·¤Æ¤¤¤Þ¤¹¡£
http://github.com/tiadeen2/jCarouselLite_auto_controller
** ¤µ¤¤¤´¤Ë [#m901912c]
º£²ó¤Î¼ÂÁõ¤Ë¤ÏWAI-ARIA¤Ø¤ÎÂбþ¤Ê¤É¤Ï´Þ¤Þ¤ì¤Æ¤¤¤Þ¤»¤ó¡£
¼ÂÁõ¤Î¥¢¥é¤òõ¤»¤Ð¿§¡¹¤¢¤ë¤È»×¤¤¤Þ¤¹¤¬¡¢¤Á¤ç¤Ã¤È¤º¤ÄÂбþ¤·¤Æ¡¢
¤½¤ì¤ò¸ø³«¤·¤Æ¤¤¤±¤ì¤Ð¤È»×¤Ã¤Æ¤¤¤Þ¤¹¡£
#blikifooter(Ãݼ)
Tag: [[JavaScript>tag/JavaScript]], [[jQuery>tag/jQuery]]