提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生javascript效果：焦點圖 </title><style type="text/css">/* YUI reset */* {margin: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 {position: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 () {var 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].className = '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></head><body><div class="wrapper"><h1>原生javascript效果：焦點圖</h1><div id="con"><ul class="img"><li></li><li></li><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></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
