HTML
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>
的CSS:
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}
答案 0 :(得分:1)
首先为您的T恤图像指定一个ID:
<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
然后在你的黑&amp;白色按钮使用T恤将更改为的图像的URL指定数据属性:
<div class="inner" data-image-id="http://urltoblackimage.jpg"></div>
然后使用jQuery在点击时更改图像src:
$('div.inner').click(function() {
var image = $(this).attr('data-image-id');
$('#t-shirt').attr('src', image);
});
也许给你的div class =“inner”一个更好的触发器名称,带有ID或更具描述性的类名,以避免冲突。
答案 1 :(得分:0)
在相关的<a>
代码中添加ID,然后使用
document.getElementById('idOfTag').setAttribute('href')='someOtherImage.jpg';
这只是javascript函数中的几行。创建按钮或用户点击的任何内容,通过添加onclick="yourFunctionsName()
不需要jquery!
答案 2 :(得分:0)
这是在简单的Javascript中执行此操作的最简单方法。
function switchImages(){
if(document.getElementById("mainImage").src != "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg") {
document.getElementById("mainImage").src = "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg";
document.getElementById("smallImage").src = "http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg";
}else{
document.getElementById("mainImage").src = "http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg";
document.getElementById("smallImage").src = "http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg";
}
}
&#13;
.container {
min-height: 565px;
width: 878px;
margin: 0 auto;
padding-top: 220px;
position: relative;
}
body{
background-color: #000;
}
.img-main {
margin-bottom: 10px;
text-align: center;
float: left;
margin-top: 0px;
}
#colorsAndAltContainer {
position: relative;
top: 0;
right: 0;
width: 70px;
height: 300px;
float: left;
margin-left: 6px;
}
.inner {
cursor: pointer;
}
.description {
display: none;
}
.rgbColor {
border: 1px solid #cbcbcb;
width: 13px;
height: 13px;
}
.selectColor {
float: left;
}
.selectColor ul {
float: left;
margin-right: 6px;
}
ul {
list-style: none;
padding: 0;
margin-top: 0px;
}
.altImages {
position: absolute;
width: 70px;
bottom: 0;
right: 0;
}
.alternativeImages {
bottom: 0;
}
.alternativeImages li {
cursor: pointer;
margin-top: 6px;
}
img {
display: block;
}
&#13;
<div class="container">
<p class="img-main">
<a href="#" class="overlaybox-img">
<img id="mainImage" src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg">
</a> </p>
<div id="colorsAndAltContainer">
<ul class="">
<li class="defaultColor selected">
<div class="inner">
<div class="description">BLACK</div>
<div onclick="switchImages();" class="rgbColor" data-color="000000" style="background-color: #000000"></div>
</div>
</li>
<li>
<div class="inner">
<div class="description">WHITE</div>
<div onclick="switchImages();" class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div>
</div>
</li>
<div class="altImages">
<ul class="alternativeImages">
<li class="selected">
</li>
<li>
<img onclick="switchImage();" id="smallImage" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" >
</li>
</ul>
</div>
</ul>
</div>
</div>
&#13;
答案 3 :(得分:0)
这是一种简单的方法,无需更改现有代码中的任何内容。
<script>
$().ready(function(){
$('#colorsAndAltContainer li').on('click',function()
{
if($(this).find('.rgbColor').data('color') === "000000")
{
$('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg");
$('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg");
}
else if($(this).find('.rgbColor').data('color') === "FFFFFF")
{
$('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg");
$('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg");
}
});
$('.alternativeImage').on('click',function()
{
var smallImageUrl = $(this).attr("src");
var mainImageUrl = $(".img-main img").attr("src");
$(this).attr("src",mainImageUrl);
$(".img-main img").attr("src",smallImageUrl);
$(".img-main img").css("width","300px");
});
});
</script>