创建裁剪的图像幻灯片
Posted
技术标签:
【中文标题】创建裁剪的图像幻灯片【英文标题】：Creating a cropped image slideshow 【发布时间】：2015-02-09 13:17:01 【问题描述】：我希望创建两个并排的图像画廊，它们可以相互独立控制，并允许有趣的图像组合。
我有裁剪后的图像代码和“点击更改图像”代码，我只是不知道如何将两者结合起来。
代码：http://jsfiddle.net/7ae0chbs/
<!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>
学习
【问题讨论】：
你到底在问什么？ 嗨，我正在寻找的是一种组合我拥有的两组代码的方法。所以我希望裁剪的图像在单击时会发生变化，就像裁剪图像下方的图像一样。 【参考方案1】：不确定我是否 100% 理解您的最终结果，但您是否希望并排 div 的背景在单击时发生变化？
如果是这样，这是你想要的吗？ http://jsfiddle.net/u1uostrc/
我刚刚将 id 添加到显示实际图像的两个 div 中，并为它们设置了 onclicks，以及每个的计数器。
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;
希望这会有所帮助...
【讨论】：
以上是关于创建裁剪的图像幻灯片的主要内容，如果未能解决你的问题，请参考以下文章