webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

クリックすると画像が置換する

  • クリックすると画像が置換する
  • 3枚の画像をクリックするたびに置換する。
  • ループにする。

<script>

var images = new Array();
images[0]= 'images/d1.jpg';
images[1]= 'images/d2.jpg';
images[2]= 'images/d3.jpg';

var i = 0;
function changeImg(){
if(i==2){
i=0;

// i==2の時は、iに0を代入する。
var pic = document.getElementById('pic');
pic.src= images[i];
}else{
i++;
var pic = document.getElementById('pic');
pic.src= images[i];
}
}

</script>

 

 

 

1/8追記

<script>
var pic = new Array();
pic[0]='images/d1.jpg';
pic[1]='images/d2.jpg';
pic[2]='images/d3.jpg';

var i = 1;

function imgChange(){
if(i == pic.length){
i=0;
var picture = document.getElementById('picture');
picture.src = pic[i];
i=1; //この条件が必要
}else{
var picture = document.getElementById('picture');
picture.src = pic[i];
i++;
}
}
</script>