具有多个拇指的 CSS 图像翻转 onclick

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 属性，尽管可以通过多种方式完成! :)