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

　　你想无刷新的展览一些你的图片作品集？可以的，往元素中加载图片就可以了，有没有想过这也是通过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('') $(".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> <img id="largeImg" src="http://www.veryhuo.com/uploads/Common/images/Liehuo_833829.jpg" alt="烈火网-为网页设计、WEB开发与网站运营提供动力！" /> <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> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

使用softaculous创建WordPress临时站点

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

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

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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