您当前位置: 首页 » web前端 » jquery » web前端 » 简单的jquery banner焦点图特效

简单的jquery banner焦点图特效

2015年9月23日 | 蒙奇·D·撸码客 发表评论(0) 查看评论

需求:用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,web前端内容推荐

分类:

JavaScript, web前端

| 标签:

发表评论?

0 条评论。

发表评论