イメージを動かす
以前つかった高尾山とかのimage画像を流用しますよ
フォルダごと今日のところにコピー。
body{
background:#c3ff75;
}
#frame{
height: 166px;
width: 500px;
background-color:#333;
margin:auto;
position:relative;
border: double 5px #fff;
/*overflow:hidden;*/
}
#slide{
height:166px;
width:1250px;
position:absolute;
top:0;
left:0;
}
↑いれものはこう。
存在しない要素をつくって5枚あぺんどする。
$(function(){
console.log('foo');
for(i=1; i<=5; i++){
var elehoge = $('<img>').attr('src','img/'+i+'.jpg').css('width','250px');
$('#slide').append(elehoge);
}
});
まちがえたところ
①生成するのは要素なので<>で囲む必要があった
<'#img'>
②要素のプロパティを（最初に）設定するのはcssでなくattr
なにもないのにcssをいきなりはできないっぽい。
これはなぜ5枚の画像が勝手に横並びになったか？
①position:absolute;されているのはimgの親要素にあたる#slide
②imgはインライン要素
③インライン要素は横並びする
もしimgにアブソリュートがかかっていたら確かに5枚とも重なって表示された。
しかし
frame
-slide
-img
という孫要素になっているため、
普通に<p>のように並んで<img>が横並びした。
