jQuery 图片自动轮换代码类似幻灯片效果

http://www.veryhuo.com 烈火网 2010-07-14 投递稿件

　　jquery 自动轮换内容，在代码中可以设置图片的数量，也可以设置切换的时间，如果不想让其轮番的话，也可以让它定时显示一条信息，代码里可以经过设置修改。

　　以前我们曾经介绍过许多这样的效果，文章回顾：

　　图片焦点切换展示效果,基于JQuery-1.4.2.js

　　jQuery.slide.5.0图片集效果,自动切换播放

　　jQuery实现图片上一张下一张切换功能

　　更多此类效果，请使用：>>>烈火搜索

　　网页演示：点击查看

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> <base href="http://www.veryhuo.com"> <title>jquery 自动轮换内容</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.3.2.js"></script> <style> body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;} li{list-style:none;}img{border:none;}em{font-style:normal;} a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();} a:hover{color:#000;text-decoration:underline;} body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;} .clear{height:0;overflow:hidden;clear:both;} /* 自动轮换内容 */ .change{margin:100px;padding:5px;width:400px;height:343px;border:#e7e7e7 1px solid;} </style> </head> <body> <script type="text/javascript"> // 自动轮换内容 $(document).ready(function(){ var objStr = ".change ul li"; $(objStr + ":not(:first)").css("display","none"); setInterval(function(){ if( $(objStr + ":last").is(":visible")){ $(objStr + ":first").fadeIn("slow").addClass("in"); $(objStr + ":last").hide() } else{ $(objStr + ":visible").addClass("in"); $(objStr + ".in").next().fadeIn("slow"); $(objStr + ".in").hide().removeClass("in")} },4000) //每3秒钟切换 }) </script>  <div class="change"> <ul> <li><a href="#"><img src="/uploads/common/images/liehuonet_400x345_1.jpg"/></a></li> <li><a href="#"><img src="/uploads/common/images/liehuonet_400x345_2.jpg"/></a></li> <li><a href="#"><img src="/uploads/common/images/liehuonet_400x345_3.jpg"/></a></li> </ul> </div> 也可以是定时显示一条信息 </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

上一篇：jQuery仿淘宝幻灯片图片轮播效果二款
下一篇：js 实现渐隐图片,鼠标经过时的渐现效果

相关阅读

16-04-20报错找不到jquery-1.10.2.min.map解决办法
16-04-07PPT不能全屏播放怎么办
16-04-07PPT2013幻灯片播放顺序设置方法
16-04-07PPT2013幻灯片放映时隐藏鼠标指针方法
14-12-04headroom.js有什么用 headroom.js用法
13-05-27jQuery实现文字环绕图片的布局效果
12-10-21使用 jQuery 在新窗口打开外部链接
12-10-18jQuery1.8.2源码解析之jQuery.Callbacks
12-10-18jQuery ajax 在ie下面没有被调用的原因
12-10-13WordPress在Footer载入jQuery代码的方法
12-09-02利用jQuery插件打造简洁的回到顶部按钮
12-08-09jQuery实现图片即时上传附完整源代码
12-08-08使用jQuery在网页中实现分隔线的功能
12-08-06jQuery实例：关于$.getJSON跨域Ajax方法
12-07-25jQuery打造动感的玫瑰花百叶展开效果

网友评论

栏目导航

本类年榜本类月榜

推荐软件

推荐阅读相关下载

关于我们 | 联系方式 | 广告服务 | 站内搜索 | 网站合作 | 免责声明 | 网站地图 | 反馈意见 | 回到顶部

jQuery 图片自动轮换代码 类似幻灯片效果

jQuery 图片自动轮换代码类似幻灯片效果