渐近动画显示的图片切换,基于jQuery1.4实现

　　jQuery 循环图片滚动，这里请注意jQuery版本，1.3用以前版本可能会使本效果变差，最后用1.4以上版本，从官方说明看，jQuery1.4与1.3还是存在一些差别的。循环图片滚动用jQuery去实现是比较方便的，其效果大致另人满意。

　　近日，有很多站长恶意采集烈。火。网（Liehuo。Net）的文章，关于此，烈火发表最新声明：http://www.veryhuo.com/help/mianze.html

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery 循环图片滚动</title> <style type="text/css"> *{ margin:0; padding:0;} body{ font-size:12px; color:#000; background:#323232;} li{ list-style:none;} img{ border:none;} .box{ width:380px; margin:20px auto; height:24px; padding-top:144px; background:#000; position:relative; overflow:hidden;} .box ul{ position:absolute; top:10px; left:0; height:114px; width:800px;} .box li{ float:left; margin-left:16px; _display:inline; padding-top:28px; width:80px; height:56px; filter:alpha(opacity=60);-moz-opacity:0.60;opacity:0.60;} .box li.cur{ width:160px; height:114px; padding-top:0; filter:alpha(opacity=100);-moz-opacity:1;opacity:1;} .box li img{ width:100%; height:100%; background:#000;} .box div{ height:24px; line-height:24px;} .box a{ text-decoration:none;font-family:Arial, Helvetica, sans-serif; width:150px; font-weight:900; color:#900;} .box a:hover{ background:#900; color:#fff;} .box .gol{ float:left;text-align:left; padding-left:6px; } .box .gor{ float:right;text-align:right; padding-right:6px; } </style> </head> <body> <div class="box" id="box"> <ul> <li><a href="#nogo"><img src="/uploads/common/images/p1.jpg" alt="美景" /></a></li> <li class="cur"><a href="#nogo"><img src="/uploads/common/images/p5.jpg" alt="流浪" /></a></li> <li><a href="#nogo"><img src="/uploads/common/images/p2.jpg" alt="旅游" /></a></li> <li><a href="#nogo"><img src="/uploads/common/images/p3.jpg" alt="休闲" /></a></li> <li><a href="#nogo"><img src="/uploads/common/images/p4.jpg" alt="住宿" /></a></li> </ul> <div> <a href="#nogo" class="gol" id="gol"><<</a> <a href="#nogo" class="gor" id="gor">>></a> </div> </div> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ trid.init(); }); var trid=new Object(); trid={ li:$("#box li"), licur:$("#box li.cur"), ul:$("#box ul"), len:$("#box li").length, door:true, curidx:1, gol:$("#gol"), gor:$("#gor"), init: function(){ this.format(); this.bindact(); }, format: function(){ var w = (this.len) * 96 + 175 + "px"; this.ul.css({ "width": w }); }, step: function(i){ var self = this; if (!self.door) return false; self.door = false; self.curidx += i; var m = 92 * i; if (i < 0) { if (self.curidx <= -1) { self.curidx += self.li.length; } i = -i; for (var k = 0; k < i; k++) { self.ul.find("li:last").prependTo(self.ul); } self.ul.css({ "margin-left": m + "px" }); self.ul.animate({ "margin-left": "0" }, { duration: 500, complete: function(){ self.door = true; } }); } else if (i > 0) { if (self.curidx >= self.li.length) { self.curidx -= self.li.length; } self.ul.animate({ "margin-left": -m + "px" }, { duration: 500, complete: function(){ for (var k = 0; k < i; k++) { self.ul.find("li:first").appendTo(self.ul); } self.ul.css({ "margin-left": 0 }); self.door = true; } }); } self.display(); }, display: function(){ var self=this; self.licur.animate({ "padding-top":"28px", "width":"80px", "height":"56px", "opacity":"0.6" },{duration:500}); self.li.eq(self.curidx).animate({ "width":"160px", "height":"114px", "padding-top":"0", "opacity":"1.0" },{duration:500, complete:function(){ cur(self.li.eq(self.curidx)); }}); this.licur=this.li.eq(this.curidx); }, bindact: function(){ var self = this; this.gor.bind("click", function(){ self.step(1); $(this).blur(); }); this.gol.bind("click", function(){ self.step(-1); $(this).blur(); }); self.li.bind("click", function(){ if($(this).hasClass("cur")) return; var j = $(this).index() - 1; self.step(j); }); } } function cur(ele, currentClass, tag){ var ele = $(ele) || ele; var tag = tag || ""; var mark = currentClass || "cur"; ele.addClass(mark).siblings(tag).removeClass(mark); } </script> </body> </html> <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

渐近动画显示的图片切换,基于jQuery1.4实现

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

渐近动画显示的图片切换,基于jQuery1.4实现

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展