1

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

<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%;
}
4

2 回答 2

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/

于 2013-07-14T16:08:35.373 回答
0

另一个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/

于 2013-07-14T16:12:56.770 回答