css - 内容库布局

Question

我正在尝试使用此图像中的布局创建一个简单的画廊（http://i.stack.imgur.com/8juB3.jpg）。当查看者导航到页面时，我希望他们最初在主框中看到文本/图像内容，在较小的框中看到图像。如果查看者单击其中一个较小的框，我希望主框中的内容相应更改。

如果有人能指出我正确的方向，那就太好了，谢谢！

谢谢！

Answer 1

<img src="something.jpg" onclick="changeX1()" /> //That's an example of the img tag on HTML:
<div id="gallery">Initial text</div> //This is the place where the big image will be shown, initially with text.

Javascript：

var x=0
var y=document.getElementById("gallery");
}
function changeX_1(){
    x=1
    changePic();
}

function changePic(){
    switch (x){
        case 1:
            y.style.innerHTML="";
            y.style.backgroundImage="url(something)";
            break;    
    }
}

我所做的是，制作了 2 个变量：x 和 y。'x' 将是图片编号，'y' 将是背景。当你点击一张图片时，'x' 会改变，y 的 innerHTML 会被删除，背景图片也会改变。

我在示例中只使用了 1 张图片，一个真正的画廊将由更多组成。对于您添加的每张照片，您都需要一个新的“changeX”功能和另一个案例。

如果你不懂 javascript，你应该学习 :)

编辑：

var x=0
var y=document.getElementById("gallery");
}
function changeX1(){
    x=1
    changePic();
}
function changeX2(){
    x=2
    changePic();
}


function changePic(){
    switch (x){
        case 1:
            y.style.innerHTML="";
            y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Lookbookcolor.jpg?7024)";
            break;    
        case 2:
            y.style.innerHTML="";
            y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Videocolor.jpg?7178)";
            break;    
    }
}