jquery-图片特效，如何实现图片的轮换（二）

最新推荐文章于 2024-08-09 12:00:50 发布

原创最新推荐文章于 2024-08-09 12:00:50 发布 · 815 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #jquery

ruby on rails 同时被 3 个专栏收录

105 篇文章

订阅专栏

jquery 插件

8 篇文章

订阅专栏

资料整理

3 篇文章

订阅专栏

本文介绍了如何使用jQuery的animate方法为图片轮播添加平滑过渡效果。通过设置图片的marginLeft属性，实现图片间的无缝切换，并提供了完整的代码示例。

接着上一篇文章来

http://blog.youkuaiyun.com/hexudong08/article/details/7205728

现在图片能够轮换，现在我想对图片加些特效，该怎么办呢？
特效需要使用jquery 的animate方法

具体参考：
http://www.w3school.com.cn/jquery/effect_animate.asp
接着写代码

修改一下js代码即可

	$(function(){
			var w = 707;
			var l = $("ul li").length;
			var speed = 500;
			var i = 1;
			$("ul").width(w*l);
			setInterval(function(){
				i = (i+1) % l;
				$("ul").animate({
					"marginLeft": "-"+i*w+"px",
				}, speed);
			},3000);
    });