一个极简单的js图片切换，焦点图显示代码

发布时间：2018-08-18 23:30:24 所属栏目：Asp教程来源：站长网

导读：一款简洁的网页焦作图，用在网页上可作图片切换，做的比较简洁，不管是焦点图的表现形式或是焦点图代码这方面，都省去了不少的代码，图片引用了本站的演示图片，在CSS中，可以设置焦点图控制按钮的背景图片，这样不至于图片会影响到控制按钮的显示。示例

　　一款简洁的网页焦作图，用在网页上可作图片切换，做的比较简洁，不管是焦点图的表现形式或是焦点图代码这方面，都省去了不少的代码，图片引用了本站的演示图片，在CSS中，可以设置焦点图控制按钮的背景图片，这样不至于图片会影响到控制按钮的显示。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>焦点图</title> <style type="text/css"> *{margin:0px;padding:0px;} body { margin: 0; padding: 0; font-size: 12px; line-height:200%; } a{ color:#333; text-decoration:none; } img{border:0px;} .hot{ position:relative; width:296px; height:392px; } .num{ position:absolute; right:6px; bottom:4px; } .num li{ float:left; height:21px; width:24px; margin-right:3px; } .num li a{ display:block; font-weight:bold; text-align:center; } .num_other{ color:#000; background:url() no-repeat; } .num_now{ color:#FFF; background:url() no-repeat; } </style> </head> <body> <div class="hot"> <div id="cover"> <div id="cover1"><a href="#"><img src="/uploads/common/images/wall1.jpg" height=392 width=296 alt="钻石" /></a></div> <div id="cover2" style="display:none;"><a href="#"><img src="/uploads/common/images/wall2.jpg" height=392 width=296 /></a></div> <div id="cover3" style="display:none;"><a href="#"><img src="/uploads/common/images/wall3.jpg" height=392 width=296 /></a></div> <div id="cover4" style="display:none;"><a href="#"><img src="/uploads/common/images/wall4.jpg" height=392 width=296 /></a></div> </div> <ul id="idNum" class="num"> <li><a href="#" id="num1" class="num_now" onmouseover="coverHover(1);">1</a></li> <li><a href="#" id="num2" class="num_other" onmouseover="coverHover(2);">2</a></li> <li><a href="#" id="num3" class="num_other" onmouseover="coverHover(3);">3</a></li> <li><a href="#" id="num4" class="num_other" onmouseover="coverHover(4);">4</a></li> </ul> <input type="hidden" id="count" value="1"> </div> <script type="text/javascript"> function g(o) { return document.getElementById(o); } function coverChange() { var order = parseInt(g("count").value); if (order < 4) { orderNext = order + 1; } else { orderNext = 1; }; for (var i = 1; i <= 4; i++) { g("cover" + i).style.display = "none"; g("cover" + orderNext).style.display = "block"; g("num" + i).className = "num_other"; g("num" + orderNext).className = "num_now"; } g("count").value = orderNext; } var t = setInterval(coverChange, 6000); function coverHover(e) { //clearInterval(t); for (var i = 1; i <= 4; i++) { g("cover" + i).style.display = "none"; g("cover" + e).style.display = "block"; g("num" + i).className = "num_other"; g("num" + e).className = "num_now"; } }; </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：武汉站长网）

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

ASP建成不重复随机数的	ASP.NET Web Page应用
WEB页面多语言支持解决	获取转向地址的URL的源