更改产品的图片来源 "showoff"

Question

我有一个脚本，其中有一张大图和三张小图，现在当点击其中一张小图时，我希望大图变成那张图片。我知道这可以通过更改图像 src 来完成我只是不知道如何，然后我也在想这是否是个好主意，考虑到小图像是大图像的另一个尺寸，所以也许最好只需将小图片用作按钮，然后将大图片更改为客户点击的小图片的放大版本。

我的代码(html):

<div class="poductoneimg">
                <img src="IphonePic1.jpg" alt="iPhone" style="height: 300px; width: 200px">
            </div>

            <div class="imgonethumbnail">
                <img src="IphonePic1.jpg" alt="iPhone" style="height: 70px; width: 40px">
            </div>

            <div class="imgtwothumbnail">
                <img src="IphonePic2.jpg" alt="iPhone" style="height: 70px; width: 40px">
            </div>

            <div class="imgthreethumbnail">
                <img src="IphonePic3.jpg" alt="iPhone" style="height: 70px; width: 40px">
            </div>

我的代码(css):

.productoneimg{
    position: absolute;
    top: 250px;
    left: 50%;
    margin-left: -400px;
}

.imgonethumbnail{
    position: absolute;
    left: 50%;
    margin-left: -380px;
    top: 580px;
    border: 1px solid black;
}

.imgtwothumbnail{
    position: absolute;
    left: 50%;
    margin-left: -325px;
    top: 580px;
    border: 1px solid black;
}

.imgthreethumbnail{
    position: absolute;
    left: 50%;
    margin-left: -270px;
    top: 580px;
    border: 1px solid black;
}

Answer 1

希望这对您有所帮助

<div class="poductoneimg">
            <img src="IphonePic1.jpg" class='mainimg' alt="iPhone" style="height: 300px; width: 200px">
        </div>

        <div class="imgthumbnail">
            <img src="IphonePic1.jpg" alt="iPhone" style="height: 70px; width: 40px">
        </div>

        <div class="imgthumbnail">
            <img src="IphonePic2.jpg" alt="iPhone" style="height: 70px; width: 40px">
        </div>

        <div class="imgthumbnail">
            <img src="IphonePic3.jpg" alt="iPhone" style="height: 70px; width: 40px">
        </div>

$( ".imgthumbnail" ).click(function() {
  $('.mainimg').attr('src',$(this).attr('src'))
 });

Answer 2

<div class="poductoneimg">
                <img id="main" src="http://placehold.it/350x150" alt="iPhone" style="height: 300px; width: 200px">
            </div>

            <div class="imgonethumbnail">
                <img src="http://placehold.it/350x150" alt="iPhone" style="height: 70px; width: 40px"  onclick="changeimg(this.src)" >
            </div>

            <div class="imgtwothumbnail">
                <img src="http://placehold.it/250x150" alt="iPhone" style="height: 70px; width: 40px" onclick="changeimg(this.src)">
            </div>

            <div class="imgthreethumbnail">
                <img src="http://placehold.it/350x250" alt="iPhone" style="height: 70px; width: 40px" onclick="changeimg(this.src)">
            </div>

JS:

function changeimg(src) {
    document.getElementById('main').src=src;
}

演示：http://jsfiddle.net/a3xhfc17/1/

更改产品的图片来源 "showoff"

Change image src for product "showoff"

javascript

html

css

image

src