jQuery 多张图片快速切换实现GIF动画效果

有时候展示产品图片可能需要动画效果更能体现产品特色,尤其是一些能发光的产品。比较传统的办法是制作GIF动画图片,但由于GIF图片256色的限制,动画图片多少有些实真,而且帧数一多体积就变得很大。其实还可以用jQuery多张图片快速切换实现GIF动画效果,这样首先能保证清晰度,另外也可能减少空间占用。

来看看效果对比吧:

一张真正的GIF动画图片
GIF动画

jQuery轮播三张图片实现的动画效果

灯闪烁的图片没有就用文字blink代替了。是不是jQuery实现的动画效果更好呢?颜色和细节没有GIF动画那么失真吧?上面的图片显示大小是500*500,而真实大小是800*800,修改代码对比下真实大小,差距更大。要有更好的效果,可以用无损PNG图片。

这段代码和图片是在前公司时候自己做的,那时候想用一个多属性产品把理论上可以有5*2*4*12*4=1920个产品都囊括进来,真有点疯狂,Magento是支持的,我设置的属性也把所有情况都考虑进去了,然后做了这个图和动画效果,应该算是能体现所有这些产品的特征了,不过后来还是分为八个多属性产品来做的,免费帮打个广告吧,参见 https://www.kiwilighting.com/3mm-5mm-8mm-10mm-led-diodes

用JQ实现的效果虽好,但如果是用的平台,如aliexpress,amazon好像是会限制/禁用JS或iframe…ebay模板好像可以用JS。

=========

演示 | 下载

代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>KiwiLighting 3mm 5mm 8mm 10mm LED lights img</title>
<style type="text/css">
#BlinkingImg img{
	display:none
}
</style>
<script type="text/javascript" src="jq144.js"></script>
<script type="text/javascript">
	$(function(){
		 var i=0
		 var z=40; //图片总数
		 var BlinkingImg=$("#BlinkingImg img");		 
		setInterval(function(){
		   if(i==z){i=0}
		   BlinkingImg.eq(i).show().siblings().hide();	
		   i++;
		},50)		 	 	
	});
</script>
</head>

<body>

<div id="BlinkingImg">
	<a href="//www.kiwilighting.com/3mm-5mm-8mm-10mm-led-diodes" target="_parent" title="KiwiLighting 3mm 5mm 8mm 10mm LED lights">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-rgb.jpg">
	
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink.jpg">
	
	
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	<img width="500" height="500" src="35810-text-blink-no.jpg">
	</a>
	
</div>


</body></html>

Add a Comment

Your email address will not be published.