需求：用jquery制作简单的banner焦点图切换特效，切换效果就是图片之间的渐变。
思路：图片之间的渐变切换可以用fadeIn()，fadeOut()方法，即淡入淡出。但是这两个方法有个缺点就是图片切换会出现一段空白。因为fadeIn()，fadeOut()没有透明效果，就会造成两张图片切换的间隙中会出现空白。为解决此办法可以用 fadeTo()方法，fadeTo()方法能够调节透明度，会让两张图片之间出现交替过度的效果。
jquery代码：
var flag;
for(flag=1;flag<5;flag++){
$(".banner").fadeTo(100, 0.8,
function() {
$(this).css({
"background": "url(bgimg" + flag + ".jpg)",
"background-size": "100% 100%"
});
$(this).fadeTo(100, 1);
});
if(flag==4){
flag=1;
}
}
jquery解析：声明一个flag变量，用作循环用；background有bgimg1.jpg到bgimg4.jpg；
html代码
简单的jquery banner焦点图特效
发表评论
要发表评论，您必须先登录。
0 条评论。