图片幻灯切换代码，JavaScript实现百叶窗效果

发布时间：2018-08-16 20:33 所属栏目：120 来源：站长网

导读：图片幻灯切换代码， Java Script实现百叶窗效果，用JS模拟PPT里的幻灯片切换效果，推入推出和淡入淡出的由于太多了，就先不发了，先上百叶窗切换特效热热身。（代码有许多需要优化的地方，最大的一处就是图片缓存，这里只做引出思路之用。示例： !Doctype

　　图片幻灯切换代码，JavaScript实现百叶窗效果，用JS模拟PPT里的幻灯片切换效果，推入推出和淡入淡出的由于太多了，就先不发了，先上百叶窗切换特效热热身。（代码有许多需要优化的地方，最大的一处就是图片缓存，这里只做引出思路之用。

　　示例：

<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=gbk" /> <title>百叶窗图片幻灯切换代码</title> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body> <div id="shutter" class="shutter" style="float:left"> <ul> <li><a href="/" target="_blank"><img src="/uploads/common/images/p1.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p2.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p3.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p4.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p5.jpg" /></a></li> </ul> </div> <div id="shutter2" class="shutter" style="float:right"> <ul> <li><a href="/" target="_blank"><img src="/uploads/common/images/p1.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p2.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p3.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p4.jpg" /></a></li> <li><a href="/" target="_blank"><img src="/uploads/common/images/p5.jpg" /></a></li> </ul> </div> <script type="text/javascript"></script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）