Question

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

我的代码（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”的图像src

2 个答案: