无刷新展示图片集类似幻灯片效果

发布时间：2018-10-06 16:15:25 所属栏目：Asp教程来源：站长网

导读：你想无刷新的展览一些你的图片作品集？可以的，往元素中加载图片就可以了，有没有想过这也是通过 jQuery 实现的吧，这个效果类似于幻灯片效果，唯一的缺点是：不能显示加载中效果，不能自动幻灯。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitiona

　　你想无刷新的展览一些你的图片作品集？可以的，往元素中加载图片就可以了，有没有想过这也是通过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" /> <title>无刷新展示图片集类似幻灯片效果 - liehuo.net</title> <script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("h2").append('<em></em>') $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("h2 em").html(" (" + largeAlt + ")"); return false; }); }); </script> <style type="text/css"> body { margin: 20px auto; padding: 0; width: 580px; font: 75%/120% Arial, Helvetica, sans-serif; } h2 { font: bold 190%/100% Arial, Helvetica, sans-serif; margin: 0 0 .2em; } h2 em { font: normal 80%/100% Arial, Helvetica, sans-serif; color: #999999; } #largeImg { border: solid 1px #ccc; width: 550px; height: 400px; padding: 5px; } .thumbs img { border: solid 1px #ccc; width: 100px; height: 100px; padding: 4px; } .thumbs img:hover { border-color: #FF9900; } </style> </head> <body> <h2>插图集锦</h2> <p><img id="largeImg" src="http://www.veryhuo.com/uploads/Common/images/Liehuo_833829.jpg" alt="烈火网-为网页设计、WEB开发与网站运营提供动力！" /></p> <p class="thumbs"> <a href="http://www.veryhuo.com/uploads/Common/images/Liehuo_838692.jpg" title="图片 2"><img src="http://www.veryhuo.com/uploads/Common/images/Liehuo_838692_thumb.jpg" /></a> <a href="http://www.veryhuo.com/uploads/Common/images/Liehuo_841542.jpg" title="图片 3"><img src="http://www.veryhuo.com/uploads/Common/images/Liehuo_841542_thumb.jpg" /></a> <a href="http://www.veryhuo.com/uploads/Common/images/Liehuo_847143.jpg" title="图片 4"><img src="http://www.veryhuo.com/uploads/Common/images/Liehuo_847143_thumb.jpg" /></a> <a href="http://www.veryhuo.com/uploads/Common/images/Liehuo_858573.jpg" title="图片 5"><img src="http://www.veryhuo.com/uploads/Common/images/Liehuo_858573_thumb.jpg" /></a> <a href="http://www.veryhuo.com/uploads/Common/images/Liehuo_901961.jpg" title="图片 6"><img src="http://www.veryhuo.com/uploads/Common/images/Liehuo_901961_thumb.jpg" /></a> </p> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

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

无刷新展示图片集 类似幻灯片效果

无刷新展示图片集类似幻灯片效果