1

JavaScript を使用して画像配列を作成するのに助けが必要です。src 属性を使用して循環する画像の配列を作成する必要があります。次に、画像を次のボタンと前のボタンに循環させる必要があります。画像はサイクルをループする必要があります。言い換えれば、それらを終わらせないでください。次にクリックすると、画像の最後に到達すると、最初の画像に戻って繰り返す必要があります。

誰かがこれのための簡単なコードを書いてもらえますか? とても感謝しております。

4

1 に答える 1

0

私は退屈していて、これまでこれらの1つを作成したことがありませんでした。これが私が思いついたものです：http：//jsfiddle.net/grantk/pHdAN/

<div id="images" style="height:300px;">
    <img src="http://www.livehacking.com/web/wp-content/uploads/2012/08/chrome-logo-1301044215-300x300.jpg" />
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" />
    <img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png" />
</div>
<a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>

<script>
var imgArr = document.getElementById('images').getElementsByTagName('img');

//Hide all images except first
for(var i=1; i<imgArr.length; i++){
    imgArr[i].style.display = "none";
}
i=0;

document.getElementById('prev').onclick = function(){
    if(i===0){
        imgArr[i].style.display = "none";
        i=imgArr.length-1;
        imgArr[i].style.display = "";
    }
    else{
        imgArr[i].style.display = "none";
        i--;
        imgArr[i].style.display = "";
    }
}

document.getElementById('next').onclick = function(){
    if(i===imgArr.length-1){
        imgArr[i].style.display = "none";
        i=0;
        imgArr[i].style.display = "";
    }
    else{
        imgArr[i].style.display = "none";
        i++;
        imgArr[i].style.display = "";
    }
}
</script>
于 2012-12-10T07:29:56.453 に答える