進むボタンと戻るボタンがあるJavaScriptのスライドショーを作成しようとしています。必要なのは、ボタンをクリックして次の画像または前の画像に移動できる8つの画像だけです。ただし、コードが機能せず、理由がわかりません。簡単な修正だと思いますが、遅く、すべてを試したように料金がかかります。私がそれが機能しないと言うとき、私はブラウザが「background-imageを解析できません」というエラーを返すことを指します(if / thenステートメントを削除else
し、前になくてelse部分のみを実行した場合にのみ発生しますもちろん)または単にクラッシュします。if/thenステートメントを使用して実行しようとすると、無限のループが発生する可能性があります。jsfiddleリンクは次のとおりです:http://jsfiddle.net/AZchy/。ご協力いただきありがとうございます!
これが私のJavaScriptです:
var images = new Array(8);
images[0] = "url('screen1.jpg')";
images[1] = "url('screen2.jpg')";
images[2] = "url('screen3.jpg')";
images[3] = "url('screen4.jpg')";
images[4] = "url('screen5.jpg')";
images[5] = "url('screen6.jpg')";
images[6] = "url('screen7.jpg')";
images[7] = "url('screen8.jpg')";
var i = 0;
function slideShowForward(){
if(i=7){
i = 0;
document.getElementById("images").style.backgroundImage = images[i];
}
else{
i++;
document.getElementById("images").style.backgroundImage = images[i];
}
}
function slideShowBack(){
if(i=0){
i=7;
document.getElementById("images").style.backgroundImage = images[i];
}
else{
i--;
document.getElementById("images").style.backgroundImage = images[i];
}
}
これが私のHTMLです
<body>
<div id="container">
<div id="images">
</div>
<div id="form">
<form name="buttons" action="">
<input type="button" name="previous" value="Previous" onclick="slideShowBack()"/>
<input type="button" name="next" value="Next" onclick="slideShowForward()"/>
</form>
</div>
</div>
</body>