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

发布时间：2018-09-01 20:02:03 所属栏目：编程来源：站长网

导读：jQuery 轮回图片转动，这里请留意jQuery版本，1.3用早年版本也许会使本结果变差，最后用1.4以上版本，从官方声名看，jQuery1.4与1.3照旧存在一些不同的。轮回图片转动用jQuery去实现是较量利便的，其结果大抵另人满足。克日，有许多站长恶意收罗烈。火。

　　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="<b>旅游</b>" /></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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE