0

我有一个我正在尝试创建的简单 jquery 库。

我有它的工作除了，当你点击拇指 - 它这样做：

  1. 用第一个图像替换现有拇指的空间
  2. 用拇指在主图像上方抛出浮动
    • 点击最后一个拇指看看我的意思

有谁知道我可以用 CSS 或 Jquery 解决这个问题吗？

我试图让这个超级简单。

谢谢

这是jsfiddle：http: //jsfiddle.net/webdott/zZNBQ/1/

    <div>
    <img src="image1.jpg" class="first"/>
    <img src="image2.jpg" />
    </div>

    <style>
    img {float:right;width:10%;margin:1%;}
    .fullview{width:60%;margin:0 4% 0 0;float:left;}
    .first{width:60%;margin:0 4% 0 0;float:left}
    </style>

    <script>
    $('img').click(function() {
    $(this).addClass('fullview').siblings().removeClass('fullview first');
    });
    </script>
4

2 回答 2

1

另一种选择是使用容器 div 和绝对位置；

<div style="width:40%;float:right;">

请参阅此JSFiddle。

于 2013-10-11T00:47:06.220 回答
0

我认为问题在于所选图像之前和之后的图像会影响较大的图像的显示和浮动方式。如何将大图像作为单个元素浮动，然后更改该元素的源以匹配单击的元素？像这个例子。

$('.thumbnail').click(function() {
   var src = $(this).attr('src');
   $('#fullview').attr('src',src);
});

和

#fullview {
float:left;
max-width:75%;
}

ul {
float:right;
}

li {
    display: inline;
}
li img {
    width:50px;
    cursor: pointer;
}

或者你可以做一些类似的事情，但是像这个例子一样把画廊放在一边。

于 2013-10-11T00:34:31.560 回答