Question

我正在努力在电子商务网站上实现一个非常常见的效果，在这个网站上，您有一张产品的主要图片，旁边还有一堆拇指。当您悬停或单击其中一个时，它会更改主图片中的图像。但是，我找不到关于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;
}

感谢您的任何建议。

Answer 1

你需要使用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属性，尽管它可以通过多种方式完成！：）

Answer 2

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

$(img).hover(function(){
$(this).addClass(rollover);
}, function(){
$(this).removeClass(rollover);
});

CSS图像翻转onclick与多个拇指

2 个答案: