创建裁剪图像幻灯片

Question

我希望创建两个并排的图像画廊，它们可以相互独立控制并允许有趣的图像组合。

我有裁剪图像代码和 'click to change image' 代码，我只是不知道如何将两者结合起来。

<!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>

斯图

Answer 1

不确定我是否 100% 理解您的最终结果，但您是否希望并排 div 的背景在单击时发生变化？

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

我刚刚向显示实际图像的两个 div 添加了 id，并为它们设置了点击次数，并为每个设置了计数器。

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;
    }
}

希望这对您有所帮助...

创建裁剪图像幻灯片

Creating a cropped image slideshow

javascript

css

jquery

image

crop