javascript による画像切替制御について
ある枠の中に、作者のプロフィールと作品の画像を表示する。
一定時間後、フェードアウトして、別な画像に切り替わる。
別な作者の作品になると、作者のプロフィールも変わる。
枠内の背景色も作品によって切り替わる。
それを、若干力技が入っているが、jQuery で実現する。
<script type=”text/javascript”>
jQuery.noConflict();
// jQuery を $j に割り当てます。
var $j = jQuery;
function FadeOutIn(){
var imgs = $j(‘#cc img’);
$j(“#sl img:first-child”).fadeOut(1000, function(){
var next = FadeOutIn.n + 1;
next = next == imgs.length ? 0 : next;
if(next ==0) {
$j(“#photo img:first-child”).attr(“src”, photo1);
$j(“#profile”).html(profile1);
$j(“#top-tenji”).css(“background-color”,”#cccccc”);
}
if(next ==6) {
$j(“#photo img:first-child”).attr(“src”, photo2);
$j(“#profile”).html(profile2);
$j(“#top-tenji”).css(“background-color”,”#ffffff”);
}
if(next ==10) {
$j(“#photo img:first-child”).attr(“src”, photo3);
$j(“#profile”).html(profile3);
}
if(next ==11) {
$j(“#top-tenji”).css(“background-color”,”#aaaaaa”);
}
$j(“#sl img:first-child”).attr(“src”, imgs.eq(FadeOutIn.n=next).attr(“src”)).fadeIn(‘1500’);
$j(“#product span”).html(imgs.eq(FadeOutIn.n=next).attr(“title”));
});
};
FadeOutIn.n = 0;
photo1 = ‘images/artisanA.jpg’;
photo2 = ‘images/artisanB.jpg’;
photo3 = ‘images/artisanC.jpg’;
profile1 = ‘profileA’;
profile2 = ‘profileB’;
profile3 = ‘profileC’;
$j(function(){
setInterval(“FadeOutIn()”,10000);
});
</script >