0
私はJavaScriptが新しく、私はコーディングで学びたいと考えています。私は基本的な画像ビューアを作り、 "次へ"と "前へ"をクリックしてクリックして、10枚の写真のギャラリーを前後に移動したいと考えています。だから、私は自分のHTML、私のCSSと私のjavaScriptファイルとそれを試してみるための10のランダムな写真があります。 ファイルはかなりまっすぐ進むです：基本的な画像ビューアとJavaScript
HTML：中心部にある画像と前と次のクリック可能なタグを使用して
<body>
<div id="wrap">
<div class="firstColumn">
<p>PHOTOGRAPHY</p>
<div class="firstColumnSub">
<p class="photo">SOME TITLE</p>
</div>
</div>
<div class="back">
<p><a href="index.html">BACK</a></p>
</div>
<div id="container">
<div id="controllers">
<div class="buttons" id="previous">
<p onclick="change(-1);">PREVIOUS</p>
</div>
<div class="buttons" id="next">
<p onclick="change(1);">NEXT</p>
</div>
</div>
<div><img height="100%" id="front" src="Image1.jpg"></div>
<div>
<p id="footer">Footer</p>
</div>
</div>
</div>
</body>
はわずか数のdiv。これはそれのようロースものです：
JavaScriptファイルは、異なるpituresをロードする機能が含まれていると - そしてこれは私のproblem-がその幅をつかんで更新することにより、ページの途中でそれらを中心ですCSS：
はJavaScript：
window.onload = function setUp() {
var b = document.getElementById("front").width;
document.getElementById("container").style.width = b + "px"
}
var imageCount = 1;
function change(x) {
imageCount = imageCount + x;
var image = document.getElementById('front');
var str1 = "Image";
var str2 = imageCount;
var str3 = ".jpg"
var sum = str1.concat(str2, str3);
image.src = sum;
var a = document.getElementById("front").width;
document.getElementById("container").style.width = a + "px"
}
必要な場合を除き、私はCSSを投稿していないが、あなたのアイデアを得ます。
あなたは「次へ」または「前」を押すと、あなたがこのような結果を得ることになっている：
などを...代わりに私は、ランダムなディスプレイのすべての並べ替えを取得：
ここでは、困惑していることがあります。「戻る」と「次へ」をクリックし続けると、同じ画像が2回目のOKと表示されるため、すぐには動作しません。どんな助けにも感謝！ ありがとう、P.
正確な問題は何ですか？画像の幅 – Satpal
はい、最初の3枚の画像を見ると、それらの画像は中央に配置され、「前の」タグと「次の」タグはコーナーに揃えられます（「コンテナ」はこれらすべての要素を含むdivです）。最後の2枚の写真を見ると、「次へ」と「前の」がランダムに配置されます。私が言ったように、あなたが前進し続けるなら、問題はなくなる。 – Paul
画像は幅が違うことを意図していますので、幅に関係なく中央に配置してください。 – Paul