Question

我正在制作一个网站，并希望有一个部分，其中有三个图片和一个段落。其中两张图片很小而另一张图片很大。我想拥有它，所以当你点击其中一个较小的图片时，它会占据较大的图片，而较大的图片会缩小并缩小缩略图的位置。知道怎么做这个吗？谢谢！

<div class='picture-container' id='pc1'>
    <div class='large-picture' id='lp1'>
        <img src='make-up_artist_dupontstudios.png' width='45%' height='100%' class='no-mobile' style='float:left;' />
        <div class='picture-content' style='float:right;'>
            <div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
            <div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
            <div class='small-picture' style='float:left;'>
                <img src='hair_and_makeup_dupontstudios.png' width='175' height='100' />
            </div>
            <div class='small-picture'>
                <img src='infinity_wall_dupontstudios.png' width='175' height='100' />
            </div>
        </div>
    </div>
</div>

更新：这是一些CSS

.picture-container{
    height:300px;
    width:99%;
    margin-left:auto;
    margin-right:auto;
}

.picture-content{
    width: 100%;
    margin: 0 auto;
    text-align:center;
    font-size:75%;
}

.picture-text{
    font-size:65%;
    padding-top:25px;
}

.picture-title{
   color:#FE2E2E;
   font-size:85%;
}

.small-picture{
    float:left;
    padding-right:25px;
    padding-top:25px;
    display:none;
}

#text-container{
    margin: 0 auto;
    width:90%;
}

Answer 1

$('img').click(
function(e){
  var current_img_src $('e.currentTarget').attr('src');
  var current_img $('e.currentTarget').parent();
  var large_img_src $('.large-picture img').attr('src');

  current_img.attr('src',large_img_src);
  $('.large-picture img').attr('src',current_img_src);
});

继承我自己的榜样 http://jsfiddle.net/DcRTh/

Answer 2

另一个Jquery答案：P

$(document).ready(function(){
    $('img').click(function(){
        // get the url of the picture we clicked
        var url = $(this).attr('src');
        // get the url of the large image
        var bigUrl = $('.large-picture > img').attr('src');
        // change the url of the big picture
        $('.large-picture > img').attr('src', url);
        // change the url of this picture
        $(this).attr('src', bigUrl);
    });
});

http://jsfiddle.net/brbcoding/VEy5j/

Javascript放大缩略图

2 个答案: