2017-08-13 13 views
-2

イメージを変更するためにsetIntervalを使用しようとしていますが、新しいイメージではなくイメージが変更されたときにaltテキストのみが表示されます。私はJavaSciptの新機能ですので、ご提案があればこれを覚えておいてください。イメージを変更するときにsetIntervalエラーが発生する

<html> 
 
<head> 
 
<script type="text/javascript"> 
 

 
/* <![CDATA[ */ 
 
\t var changePic; 
 
\t var pic = new Array(14); 
 
\t var curPic = 0; 
 
\t pug[0] = "gallery1.jpeg"; 
 
\t pug[1] = "gallery2.jpeg"; 
 
\t pug[2] = "gallery3.jpeg"; 
 
\t pug[3] = "gallery4.jpeg"; 
 
\t pug[4] = "gallery5.jpeg"; 
 
\t pug[5] = "gallery6.jpeg"; 
 
\t pug[6] = "gallery7.jpeg"; 
 
\t pug[7] = "gallery8.jpeg"; 
 
\t pug[8] = "gallery9.jpeg"; 
 
\t pug[9] = "gallery10.jpeg"; 
 
\t pug[10] = "gallery11.jpeg"; 
 
\t pug[11] = "gallery12.jpeg"; 
 
\t pug[12] = "gallery13.jpeg"; 
 
\t pug[13] = "gallery14.jpeg"; 
 

 
\t function change(){ 
 
\t \t if (curPic == 13) 
 
\t \t \t curPic = 0; 
 
\t \t else 
 
\t \t \t ++curPic; 
 
\t \t document.images[0].src = pic[curPic]; 
 
\t } 
 

 
\t function startChange(){ 
 
\t \t if (changePic != null) 
 
\t \t \t clearInterval(changePic); 
 
\t \t changePic = setInterval("change()", 1000); 
 
\t \t 
 
\t } 
 

 
/* ]]> */ 
 

 
</script> 
 
</head> 
 
<body> 
 
\t <img src="gallery1.jpeg" alt="gallery_pic"/> 
 
\t 
 
\t <form action=""> 
 
\t \t <input type="button" value=" Change " onclick="startChange();" /> 
 
\t \t <input type="button" value=" Stop " onclick="clearInterval(changePic);" /> 
 
\t </form> 
 
</body> 
 
</html>

基本的に私はいくつかの画像を使用して簡単なスライドショーを作成しようとしています。 何かすべての助けが大変ありがとうございます。

答えて

1

によって

pug[0] = "gallery1.jpeg"; 

: すべてのパグの文は次のように置き換える必要があります。ここでは実施例である:

var changePic; 
 
var pug = new Array(14); 
 
var curPic = 0; 
 
pug[0] = "https://randomuser.me/api/portraits/men/1.jpg"; 
 
pug[1] = "https://randomuser.me/api/portraits/men/2.jpg"; 
 
pug[2] = "https://randomuser.me/api/portraits/men/3.jpg"; 
 
pug[3] = "https://randomuser.me/api/portraits/men/4.jpg"; 
 
pug[4] = "https://randomuser.me/api/portraits/men/5.jpg"; 
 
pug[5] = "https://randomuser.me/api/portraits/men/6.jpg"; 
 
pug[6] = "https://randomuser.me/api/portraits/men/7.jpg"; 
 
pug[7] = "https://randomuser.me/api/portraits/men/8.jpg"; 
 
pug[8] = "https://randomuser.me/api/portraits/men/9.jpg"; 
 
pug[9] = "https://randomuser.me/api/portraits/men/10.jpg"; 
 
pug[10] = "https://randomuser.me/api/portraits/men/11.jpg"; 
 
pug[11] = "https://randomuser.me/api/portraits/men/12.jpg"; 
 
pug[12] = "https://randomuser.me/api/portraits/men/13.jpg"; 
 
pug[13] = "https://randomuser.me/api/portraits/men/14.jpg"; 
 

 
function change(){ 
 
    if (curPic == 13) 
 
    curPic = 0; 
 
    else 
 
    ++curPic; 
 
    document.images[0].src = pug[curPic]; 
 
} 
 

 
function startChange(){ 
 
    if (changePic != null) 
 
    clearInterval(changePic); 
 

 
    changePic = setInterval(change, 1000); 
 
}
<img width="64" height="64" src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]" alt="gallery_pic"/> 
 

 
<input type="button" value="Change" onclick="startChange();" /> 
 
<input type="button" value="Stop" onclick="clearInterval(changePic);" />

+0

私は本当に愚かな感じ。私は配列をコピーして貼り付けて、picではなくpugでtypoを作ったことに気付かなかった。 – TheGumGuy

0

私は変数picとpugの間に恋しくなると思います。私はpugpicまたはその逆であるべきだと思う

pic[0] = "gallery1.jpeg"; 
関連する問題