一个极简朴的js图片切换，核心图表当代码

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

导读：一款简捷的网页焦作图，用在网页上可作图片切换，做的较量简捷，不管是核心图的示意情势或是核心图代码这方面，都省去了不少的代码，图片引用了本站的演示图片，在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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys