スライドショー自作に参照した情報あれこれ

スライドショーをほぼ自作する必要があり、下記を参照した。いつも同様のページを参照しているような気がするが、すぐ忘れるので備忘録しておく。

使用したのは、移動系のanimate と下の関数等のみ。flex-slider 、bx-sliderなど、定型のスライドショーならば、それ自体はすぐれているとは思うが、定形外のカスタマイズがかけにくいのだ。

要素の挿入／削除

要素内前後は、.prepend()、.append()

要素外前後は、.before() 、.after()

削除は　.remove() 、detach()　※削除後も参照できる。

参考 http://js.studio-kingdom.com/jquery/manipulation/

each for を使い複数の要素の情報取得

each 基本

$('.sample').each(function(){
    処理　console.log($(this).html());など
    });

for で回す

for (var i=0; i<$('.sample').length; i++) {
    処理　code&#91;i&#93;=$('.sample').eq(i).html();など
    }
&#91;/code&#93;

<span class="gsite">参考</span>
<a class="site" href="http://dqn.sakusakutto.jp/2012/05/jquery-each-call.html" target="_blank">http://dqn.sakusakutto.jp/2012/05/jquery-each-call.html</a>

<span class="gsite">参考</span>
<a class="site" href="http://ameblo.jp/hoguma/entry-10356081593.html" target="_blank">http://ameblo.jp/hoguma/entry-10356081593.html</a>


<p class="intit">数値　←→　文字列の変換</p>

<p>数値→文字列に、<code>String(num);</code>　文字列→数値に、<code>Number(str);</code></p>

<span class="gsite">参考</span>
<a class="site" href="http://lealog.hateblo.jp/entry/2013/02/28/005010" target="_blank">http://lealog.hateblo.jp/entry/2013/02/28/005010</a>


<p class="intit">animation 終了後の処理</p>



$('#sample').animate({
    処理
},{
    'duration': 600,
    'complete': function(){
       終了後の処理
    }
});

参考 http://www.webopixel.net/javascript/507.html

絶対値の取得

var num = Math.abs(-122);

参考 http://www.ajaxtower.jp/js/math_class/index2.html

要素の位置の取得

ページ全体からみた位置は、$('#sample').offset();

親要素からみた位置は、$('#sample').position() あるいは、$('#sample').css('left')

参考 http://d.hatena.ne.jp/cyokodog/20090224/jQueryPosSet01

SetInerval を使った animation のループ

testTimer=setInterval(function(){
繰り返し処理
} , 1000);//間隔ms

参考 http://www.webopixel.net/javascript/143.html https://sites.google.com/site/jqueryjavascript/setintervaltoclearintervalno-shii-fang