0

我正在尝试在电子商务网站上实现一种非常常见的效果，在该网站上，您拥有产品的一张主要图片，旁边还有一堆拇指。当您悬停或单击一个时，它会更改主图片中的图像。但是，我找不到关于 SO 或其他地方的教程、问题来说明如何做到这一点。

我有以下代码来显示一个拇指和一张图片。但是，我不知道如何将其扩展到多个拇指。

HTML：

<tr>
    <td colspan=2>
        <p align="center">  <a class="rollover" href="detail.php">
            <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" name="pic" border="0"/>
            <span><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"/></span>
</a> 
        </p>
    </td>
</tr>
<tr>
    <td>Here is text</td>
</tr>

CSS：

a.rollover {
    display: block;
    position: relative;
}
a.rollover span {
    position: absolute;
    left: -10000px;
}
a.rollover:hover span {
    position: absolute;
    left: 200px;
}

感谢您的任何建议。

4

2 回答 2

2

您需要使用 javascript 或 jQuery 来执行此操作。它在下面提到的教程中使用 coda slider jQuery 插件很容易解释。

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

和这里的演示，

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

这是另一个很好的教程， http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

这背后的基本逻辑是使用javascript捕获对较小缩略图图像的点击并更改较大图像的img标签的src属性，尽管可以通过多种方式完成！:)

于 2013-02-13T03:32:13.730 回答
1

我建议你使用 jQuery addClass 函数。您基本上需要做的是将翻转 CSS 类应用于悬停元素，然后在鼠标离开所述元素时将其删除，如下所示：

$(img).hover(function(){
$(this).addClass(rollover);
}, function(){
$(this).removeClass(rollover);
});
于 2013-02-13T03:34:02.237 回答