Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> native JavaScript effect: Focus map </title> <style type=" Text/css "> * YUI Reset * * * {MA rgin:0; padding:0;} /* BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD {margin:0; padding:0;} */table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em, Strong,th,var {Font-style:normal;font-weight:normal} ol,ul,li {list-style:none;} caption,th {text-align:left;} h1, H2,h3,h4,h5,h6 {Font-size:100%;font-weight:normal} q:before,q:after {content: ';} abbr,acronym {border:0;} /* My/* clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} clearfix {*zoom:1;} Body {color: #333; font-size:12px; Font-family:verdana,arial,helvetica,sans-serif;} a {text-decoration:none; color: #333;} a:hover {text-decoration:underline;} . wrapper {width:600px; margin:0 auto; padding-bottom:50px;}. ad {width:468px; margin:10px auto 0; ad li {padding-top:5px ;} h1 {height:50px; line-height:50px font-size:22px; font-weight:normal; font-family: "Microsoft Yahei", SimHei;} . download {display:inline-block; height:34px; line-height:34px; padding:0 10px; Background: #333; font-size:14px; Font-weight:bold; Text-align:center; Color: #fff; border:1px solid #999; margin-top:10px;} . fenxiang {height:16px; padding:20px 0 10px; margin-bottom:10px;} . shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;} shuoming dt {height:30px; line-height:30px; Font-weight:bold; text-indent:10px;} . shuoming DD {line-height:20px padding:5px 20px;} shuoming dd a {text-decoration:underline;} . Tongji {Display:none} #con {width:400px; height:300px; margin:20px auto; border:1px solid #ccc; Position:relative; Overflow:hidden;} #con ul.img {position:absolute} #con ul.img li {float:left; width:400px; height:300px; overflow:hidden;} #con ul.btn {pos Ition:absolute; Text-align:right; width:400px; height:16px; left:0; bottom:5px;} #con p {position:absolute; width:200px; height:16px; left:5px; bottom:5px; text-align:left;} #con ul.btn Li, #con p span {display:inline-block; *display:inline; *zoom:1; padding:0 5px; margin-right:5px; height:16px; line-height:16px; Background: #333; Color: #fff; Text-align:center; Cursor:pointer;} #con ul.btn Li.on {background: #666;} </style> <script type= "Text/javascript" > Window.onload=function () {VA R Ocon = document.getElementById (' con '); var aUl = ocon.getelementsbytagname (' ul '); var Aimgli = aul[0].getelementsbytagname (' li '); var Abtnli = aul[1].getelementsbytagname (' li '); var Abtnspan = ocon.getelementsbytagname (' span '); var index = 0; var timer; Aul[0].style.width = aimgli[0].offsetwidth* (aimgli.length) + ' px '; for (var i=0; i<Aimgli.length; i++) {Aimgli[i].index = Abtnli[i].index = i; Abtnli[i].onclick = function () {index = This.index; SHOWIMG (index); }; function showimg (idx) {for (var i=0; i<aimgli.length; i++) {if (Abtnli[i].index = idx) {Abtnli[i].class Name = ' on '; else {abtnli[i].classname = ';} } aul[0].style.left =-idx*aimgli[0].offsetwidth+ ' px '; index++; if (index = = aimgli.length) {index = 0;} } ocon.onmouseover = function () {clearinterval (timer); Ocon.onmouseout = function () {timer = setinterval (function () {showimg (index); }, 3000); }; Abtnspan[0].onclick = function () {if (index = = 0) {index = aimgli.length-2;} else if (index = = 1) {index = aimgli.length-1;} else {index-= 2;} SHOWIMG (index); }; Abtnspan[1].onclick = function () {showimg (index); }; SHOWIMG (index); Timer = setinterval (function () {showimg (index); }, 3000); }; </script> </pead> <body> <div class= "wrapper" > <p> OriginalJavaScript effects: Focus graph </p> <div id= "Con" > <ul class= "img" > <li></li> <li></l i> <li></li> <li></li> </ul> <ul class= "BTN" > <li>1</li> ; <li>2</li> <li>3</li> <li>4</li> </ul> <p><span><< ;/span><span>></span></p> </div> </div><!--wrapper end--> </body> & Lt;/html></td> </tr> </table>
Tip: You can modify some of the code before running
