我希望在鼠标悬停在主要图片上时更改图像源,我有一个脚本,但它只能在两个图像时工作,但我需要从多个图像中更改图像源。
我的现有代码类似于
<img width="220" height="220" alt="DE709 Folding Sunglasses" src="/images/7804/1__63824.1339534463.220.220.jpg" onmouseover="this.src='/images/x/319/1__53737.JPG'" onmouseout="this.src='/images/7804/1__63824.1339534463.220.220.jpg'">
以上代码对我来说运行良好,但我想要类似于这样的东西。
<ul class="ProductList List">
<li class="Odd" style="height: 220px;">
<div data-product="1233" class="ProductImage QuickView" style="height: 244px; width: 220px;">
<a href="#">
<img alt="DE709 Folding Sunglasses" src="/images/7804/1__63824.1339534463.220.220.jpg">
<img style="display: none;" width="220" height="220" src="/product_images/x/319/1__53737.JPG">
<img style="display: none;" width="220" height="220" src="/product_images/w/307/1__63824.jpg">
<img style="display: none;" width="220" height="220" src="/product_images/l/017/DE-DISPLAY-BOX__82034.jpg">
</a>
<div>
</li>
<li>
<div data-product="1234" class="ProductImage QuickView" style="height: 244px; width: 220px;">
<a href="#">
<img alt="Designer Eyewear™ Folding Sunglasses DE706" src="/images/10064/DE706__95146.1346109648.220.220.jpg" />
<img width="220" height="220" src="/product_images/u/773/2__48597.JPG" style="display: none;">
<img width="220" height="220" src="product_images/w/403/1__41999.JPG" style="display: none;">
<img width="220" height="220" src="product_images/r/222/DE-DISPLAY-BOX__17353.jpg" style="display: none;"></a>
</div>
</li>
</ul>
当我第一次将鼠标悬停在image.jpg上时,它会显示image1.jpg,当鼠标移出时,它会显示image.jpg,第二次悬停时,它会显示image2.jpg,以此类推,当我悬停6次时,它会再次显示image1.jpg。
在编辑之前,我只有一个div,所有的解决方案都适用于我,但我需要对其进行一些更改。如果我有多个,则该怎么办。
我在Google上搜索了很长时间,但没有得到合适的想法,请建议我如何实现我的目标。
任何好的链接或建议都可以帮助我。