jQuery提供了渐入渐出的方法:.fadeIn()和.fadeOut(),利用这两个方法和其他方法,可以实现简单的渐入渐出图片切换动画。
首先设计好要切换的图片,通常是做成UL:
1: <div id="slider">
<!--CRLF-->
2: <ul>
<!--CRLF-->
3: <li><img src="1.jpg" />li>
<!--CRLF-->
4: <li><img src="2.jpg" />li>
<!--CRLF-->
5: <li><img src="3.jpg" />li>
<!--CRLF-->
6: <li><img src="4.jpg" />li>
<!--CRLF-->
7: ul>
<!--CRLF-->
8: div>
<!--CRLF-->
然后简单地设置一下样式:
1: #slider {
<!--CRLF-->
2: width: 400px;
<!--CRLF-->
3: height: 300px;
<!--CRLF-->
4: position: relative;
<!--CRLF-->
5: }
<!--CRLF-->
6:
<!--CRLF-->
7: #slider ul { list-style-type: none; }
<!--CRLF-->
8:
<!--CRLF-->
9: #slider ul li {
<!--CRLF-->
10: position: absolute;
<!--CRLF-->
11: left: 0;
<!--CRLF-->
12: top: 0;
<!--CRLF-->
13: }
<!--CRLF-->
通过样式表基本上就可以猜到实现的原理就是这些图片通过绝对定位叠在一起,然后通过.fadeOut()和.fadeIn()依次显示这些图片。
下面开始编写脚本,首先做准备工作:
1: var option = {
<!--CRLF-->
2: speed: 1000, // 渐变时间
<!--CRLF-->
3: timeout: 3000 // 停留时间
<!--CRLF-->
4: };
<!--CRLF-->
然后将所有的LI隐藏,只显示第一个:
1: var $li = $("#slider ul li");
<!--CRLF-->
2: $li.hide();
<!--CRLF-->
3: $($li[0]).show();
<!--CRLF-->
然后设置定时器,调用showNext函数:
1: setTimeout(function(){ showNext(1, 0); }, o.timeout);
<!--CRLF-->
最后定义showNext函数:
1: function showNext(n, c){
<!--CRLF-->
2: $($li[c]).fadeOut(o.speed);
<!--CRLF-->
3: $($li[n]).fadeIn(o.speed);
<!--CRLF-->
4: c = n;
<!--CRLF-->
5: n = (n >= $li.length - 1) ? 0 : n+1;
<!--CRLF-->
6:
<!--CRLF-->
7: setTimeout(function(){ showNext(n, c); }, o.timeout);
<!--CRLF-->
8: }
<!--CRLF-->
这样就做好了,效果还不错吧,完整的脚本代码如下:
1: $(document).ready(function(){
<!--CRLF-->
2:
<!--CRLF-->
3: var o = { speed: 1000, timeout: 2000 };
<!--CRLF-->
4: var $li = $("#slider ul li");
<!--CRLF-->
5: $li.hide();
<!--CRLF-->
6: $($li[0]).show();
<!--CRLF-->
7:
<!--CRLF-->
8: setTimeout(function(){ showNext(1, 0); }, o.timeout);
<!--CRLF-->
9:
<!--CRLF-->
10: function showNext(n, c){
<!--CRLF-->
11: $($li[c]).fadeOut(o.speed);
<!--CRLF-->
12: $($li[n]).fadeIn(o.speed);
<!--CRLF-->
13: c = n;
<!--CRLF-->
14: n = (n >= $li.length - 1) ? 0 : n+1;
<!--CRLF-->
15:
<!--CRLF-->
16: setTimeout(function(){ showNext(n, c); }, o.timeout);
<!--CRLF-->
17: }
<!--CRLF-->
18: });
<!--CRLF-->
分享到:
相关推荐
这个是非常好用的一个提示信息渐入渐出的JS,用了Jquery类,只需要将Jquery导入即可使用。
jquery是非常实用的javascript框架,我用jquery写了个标签切换的例子,和大家交流
jQuery导航菜单动画渐入渐出特效
jQuery实现两张图片渐入渐出无缝切换展示效果.zip
jQuery插件:可拖动的图片展示实例(效果超酷) jQuery插件:可拖动的图片展示实例(效果超酷)
基于jQuery的对象切换插件,JQuery图片切换,图片切换
jQuery实现图片切换
jQuery图片渐隐切换菜单,用来做网页,相当的不错!
jquery大号渐入渐出效果
主要介绍了jQuery实现图片渐入渐出切换展示效果,需要的朋友可以参考下
jquery 3d图片切换
jquery图片切换带缩略图片滚动切换
简单的Jquery实现图片切换,
jQuery 经典的图片切换效果 jQuery 经典的图片切换效果
jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,...
9种jquery图片切换案例,不用学,非常容易套用,下载下来就是自己的积累。
很不错的Jquery图片切换代码,一直在用
实现网页图片定时切换 Jquery图片定时切换展示
jquery图片滑动效果图片切换经典jquery图片滑动效果图片切换经典