- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <style>
- <!--
- li img {
- float: left;
- width: 100px;
- height: 60px;
- width: 100px;
- }
- ul {
- float: left;
- }
- ul li {
- width: 101px;
- margin-left: 30px;
- float: left;
- list-style: none;
- margin-left: 30px;
- }
- #show {
- float: left;
- width: 600px;
- height: 400px;
- border: solid 5px #498AF2;
- margin-top: 50px;
- }
- li a {
- float: left;
- }
- .div1 {
- width: 830px;
- float: left;
- margin: 0px auto;
- }
- #toFommer,#toLatter {
- float: left;
- margin-top: 170px;
- }
- #toFommer {
- margin-right: 30px;
- }
- #toLatter {
- margin-left: 30px;
- }
- .div1 a:HOVER img {
- background: #363895;
- }
- #divFull {
- width: 100%;
- }
- -->
- </style>
- <base >
- -->
- </head>
- <body>
- <div id="divFull">
- <ul id="imgInF">
- <li><a title="美女图1" href="img/bauty1.png"><img src1="img/bauty1.png">
- </a> <a title="美女图1" href="img/bauty1.png">美女图1</a></li>
- <li><a title="帅哥" href="img/coolB.png"><img src1="img/coolB.png">
- </a> <a title="帅哥" href="img/coolB.png"> 帅哥</a></li>
- <li><a title="美丽黄叶" href="img/viewF.jpg"><img src1="img/viewF.jpg">
- </a> <a title="美丽黄叶" href="img/viewF.jpg">美丽黄叶</a></li>
- <li><a title="海边风光" href="img/viewSea.png"><img src1="img/viewSea.png">
- </a> <a title="海边风光" href="img/viewSea.png">海边风光</a></li>
- <li><a title="美女图2" href="img/bauty2.png"><img src1="img/bauty2.png">
- </a> <a title="美女图2" href="img/bauty2.png"> 美女图2</a></li>
- <li><a title="霞光普照" href="img/viewSun.png"><img src1="img/viewSun.png">
- </a> <a title="霞光普照" href="img/viewSun.png">霞光普照</a></li>
- </ul>
- <div class="div1">
- <a> <img id="toFommer" src1="img/up.png"> </a> <img id="show"
- title="美女图1" src1="img/bauty1.png"> <a> <img id="toLatter" src1="img/down.png"> </a>
- </div>
- </div>
- <script type="text/javascript">
- function addLoadEvent(func) {
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = func;
- } else {
- window.onload = function() {
- oldonload();
- func();
- };
- }
- }
- function catchInF() {
- if (!document.getElementsByTagName)
- return false;
- if (!document.getElementById)
- return false;
- if (!document.getElementById("imgInF"))
- return false;
- var accentInF = document.getElementById("imgInF");
- var links = accentInF.getElementsByTagName("a");
- for ( var i = 0; i < links.length; i++) {
- links[i].onclick = function() {
- if (showP(this))
- return false;
- else
- return true;
- };
- }
- }
- function showP(pic) {
- if (!document.getElementById("show"))
- return false;
- var source = pic.getAttribute("href");
- var title = pic.getAttribute("title");
- var show = document.getElementById("show");
- if (show.nodeName != "IMG")
- return false;
- show.setAttribute("src", source);
- // document.write("fuck");
- show.setAttribute("title", title);
- return true;
- }
- function toChange() {
- var toFommer = document.getElementById("toFommer");
- var toLatter = document.getElementById("toLatter");
- toFommer.onclick = function() {
- toUp();
- };
- toLatter.onclick = function() {
- toDown();
- };
- }
- function toUp() {
- if (!document.getElementById("imgInF"))
- return false;
- if (!document.getElementById)
- return false;
- if (!document.getElementsByTagName)
- return false;
- var show = document.getElementById("show");
- var accentInF = document.getElementById("imgInF");
- var links = accentInF.getElementsByTagName("a");
- var showTitle = show.getAttribute("title");
- for ( var i = 0; i < links.length; i++) {
- if (showTitle == links[i].getAttribute("title")) {
- if (i - 2 <= 0) {
- showP(links[links.length - 1]);
- }
- else
- showP(links[i - 2]);
- }
- }
- }
- function toDown() {
- if (!document.getElementById("imgInF"))
- return false;
- if (!document.getElementById)
- return false;
- if (!document.getElementsByTagName)
- return false;
- var show = document.getElementById("show");
- var accentInF = document.getElementById("imgInF");
- var links = accentInF.getElementsByTagName("a");
- var showTitle = show.getAttribute("title");
- for ( var i = 0; i < links.length; i++) {
- if (showTitle == links[i].getAttribute("title")) {
- if (i + 2 >= links.length) {
- showP(links[0]);
- }
- else
- showP(links[i + 2]);
- }
- }
- }
- addLoadEvent(catchInF);
- addLoadEvent(toChange);
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/090920135723.html
来源: http://www.codesnippet.cn/detail/090920135723.html