Question

我希望创建两个可以独立控制的并排图像库，并允许有趣的图像组合。

我有裁剪的图片代码和“点击更改图片”代码，我只是想弄清楚如何将两者结合起来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style>
.cover {
    width: 334px;
    height: 500px;
}
.thumbnail {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: left;
}
.thumbnail2 {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: right;
}
.clearBoth { clear:both; }

img{
    width : 668spx;
    height : 500px;
}

</style>

</head>

<body>

<div class="cover" style="float:left;">
    <div style="background-image: url(sam_5331.jpg); " class="thumbnail" ></div>
</div>
<div class="cover" style="float:left;">
    <div style="background-image: url(sam_5370.jpg); " class="thumbnail2"></div>
</div>
<br class="clearBotnh" />


<img src="sam_5331.jpg" id="imgClickAndChange" onclick="changeImage()" usemap="#SUB15" />

<script>
var counter = 1;

imgClickAndChange.onclick = function(){
    if(counter == 0){
        document.getElementById("imgClickAndChange").src = "sam_5331.jpg";
        counter++;
    }
    else if(counter == 1){
        document.getElementById("imgClickAndChange").src = "sam_0092.jpg";
        counter++;
    }
    else if(counter == 2){
        document.getElementById("imgClickAndChange").src = "sam_0150.jpg";
        counter = 0;
    }
};
</script>

STU

Answer 1

我不确定我是否100％了解您的最终结果，但您是否希望在点击时更改并排的背景？

如果是这样，这就是你想要的吗？ http://jsfiddle.net/u1uostrc/

我刚刚将id添加到显示实际图像的两个div中，并为它们设置onclicks，以及每个div的计数器。

var img1Counter = 0;
var img2Counter = 1;

img1.onclick = function() {
    if (img1Counter == 0) {
        document.getElementById("img1").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Number_1_in_green_rounded_square.svg/2000px-Number_1_in_green_rounded_square.svg.png')";
        img1Counter++;
    } else if(img1Counter == 1) {
        document.getElementById("img1").style.backgroundImage = "url(http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png)";
        img1Counter++;
    } else if(img1Counter == 2) {
        document.getElementById("img1").style.backgroundImage = "url(http://upload.wikimedia.org/wikipedia/commons/6/69/VET_3_circle.png)";
        img1Counter = 0;
    }
}


img2.onclick = function() {
    if (img2Counter == 0) {
        document.getElementById("img2").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Number_1_in_green_rounded_square.svg/2000px-Number_1_in_green_rounded_square.svg.png')";
        img2Counter++;
    } else if(img2Counter == 1) {
        document.getElementById("img2").style.backgroundImage = "url(http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png)";
        img2Counter++;
    } else if(img2Counter == 2) {
        document.getElementById("img2").style.backgroundImage = "url(http://upload.wikimedia.org/wikipedia/commons/6/69/VET_3_circle.png)";
        img2Counter = 0;
    }
}

希望这会有所帮助......

创建裁剪的图像幻灯片

1 个答案: