javascriptのvarに保存された画像をクリックする方法

最初の画像をクリックすると2番目の画像に切り替わり、3番目の画像に切り替えるにはクリックする必要がありますそうです。javascriptのvarに保存された画像をクリックする方法

<img id="imgClickAndChange" class="art_shop" name="pic"  src="images/edited_images/1.jpg" style="display: none;"  onClick="changeImage();changeImageAgain();"> 

<script language="javascript"> 
function changeImage() { 

    if (document.getElementById("imgClickAndChange").src =  "images/edited_images/1.jpg") 
    { 
     document.getElementById("imgClickAndChange").src =  "images/edited_images/2.jpg"; 
    } 
} 
</script> 

<script language="javascript"> 
function changeImageAgain() { 
if (document.getElementById("imgClickAndChange").src ==   "images/edited_images/2.jpg") 
    { 
    document.getElementById("imgClickAndChange").src =   "images/edited_images/3.jpg"; 
    } 

} 
</script>

は、私はまた、私は別のものから引き出さこの例を、持っている...私は今のところこれを持って、それが唯一の第二の画像に行くとそこに停止し、又は第三に瞬時に行きます私はしばらく前にしました。画像スライダで、ヘッダに既に保存されている画像で、X秒ごとに新しい画像が読み込まれます。ボタンをクリックして次の画像（または画像自体）をロードするようにこれを修正する方法はありますか？どちらのソリューションでも機能します。ありがとう

<head> 
    <script type="text/javascript"> 
var slideimages = new Array() // create new array to preload images 
slideimages[0] = new Image() // create new instance of image object 
slideimages[0].src = "images/edited_images/1.jpg" // set image src property   to image path, preloading image in the process 
slideimages[1] = new Image() 
slideimages[1].src = "images/edited_images/2.jpg" 
slideimages[2] = new Image() 
slideimages[2].src = "images/edited_images/3.jpg" 
slideimages[3] = new Image() 
slideimages[3].src = "images/edited_images/4.jpg" 
</script> 
</head> 


<img id="imgClickAndChange" class="art_shop" name="pic"  src="images/edited_images/1.jpg" style="display: none;"  onClick="changeImage();changeImageAgain();"> 


<script type="text/javascript"> 

//variable that will incement through the images 

var step=0 

function slideit(){ 
if (!document.images) 
    return 
document.getElementById('imgClickAndChange').src = slideimages[step].src 
if (step<1) 
    document.getElementById('imgClickAndChange').src = slideimages[step].src 
if (step<2) 
    document.getElementById('imgClickAndChange').src = slideimages[step].src 
if (step<3) 
    step++ 
else 
    step=0 
setTimeout("slideit()",1000) 
} 

slideit() 

</script>

出典

2016-04-16 denisbrz

あなたはもっと簡単にすることができます。また、ページロードを遅くするので、画像をプリロードすることはお勧めしません。 EDIT：

<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()"> 

<script> 

// image sources in array. image[0] will have first image src, image[3] will have last src 
var images = [ 
    "images/edited_images/1.jpg", 
    "images/edited_images/2.jpg", 
    "images/edited_images/3.jpg", 
    "images/edited_images/4.jpg" 
] 

var step = 0; 
changeImage(); // set first image src after page loads 

function changeImage() { 
    // exit if no images, or step = number of items in array (4) 
    if (typeof images == "undefined" || step == images.length) return;  

    document.getElementById('imgClickAndChange').src = images[step]; 
    step++; 
} 
</script>

出典

2016-04-16 10:05:13 yezzz

をループすることなく、これは完璧に動作

はこれを試してみてください！どうもありがとうございます！ img4の後にimg1に戻るのを防ぐ方法がありますか？それが複雑であれば、それは不可欠ではありません – denisbrz

ええ、あなたが行うことができます：if（step == images.length）step = images.length-1; （images.length = 4であることを覚えていて、この例ではstepは0〜3である必要があります）。または、関数の開始時にリターンを変更することができます：if（！images.length || images.length == step）return;その後、ステップ= 4であれば機能を停止します。 – yezzz

最後の画像が表示されている場合、...関数は終了します。 images配列のチェックを変更しました。 – yezzz

javascriptのvarに保存された画像をクリックする方法

答えて

関連する問題