快捷導航

一款雙向無縫+按鈕定位的焦點圖實現(xiàn)代碼

更新時間：2010年11月26日 23:04:01 作者：

做這個焦點圖弄了大個晚上，感覺挺暈的~發(fā)上來給大家踩一下吧雙向無縫的原理很簡單實現(xiàn)起來也不難，主要頭痛的是在前后無縫與按鈕定位之間的配合問題，不過還好現(xiàn)在總算OK了。

<!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>myFocus - tbhuabao</title> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{background:#fff;padding:20px;} /*=========mF_tbhuabao========*/ .mF_tbhuabao {background:#ddd;border:10px solid #333;overflow:visible;} .mF_tbhuabao .pic,.mF_tbhuabao .win{position:absolute;top:0;left:0;overflow:hidden;} .mF_tbhuabao .pic li{position:relative;float:left;overflow:hidden;} .mF_tbhuabao .txt li{position:absolute;z-index:2;width:100%;height:38px;line-height:38px;display:none;}/*默認標題高度*/ .mF_tbhuabao .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*標題樣式*/ .mF_tbhuabao .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:0.3;} .mF_tbhuabao .dot{position:absolute;bottom:0;left:0;height:32px;line-height:28px;width:100%;text-align:center;} .mF_tbhuabao .dot li{display:inline;margin:0 3px;} .mF_tbhuabao .dot li a{color:#999;font-size:26px;text-decoration:none;} .mF_tbhuabao .dot li.current a{color:#f60;} .mF_tbhuabao .prev,.mF_tbhuabao .next{font:700 53px/58px arial;width:37px;height:65px;overflow:hidden;position:absolute;z-index:4;left:-20px;cursor:pointer;background:url(http://547d.ipc.la/img/myfocus/btn-bg.gif) no-repeat;} .mF_tbhuabao .next{left:auto;right:-20px;} .mF_tbhuabao .prev a,.mF_tbhuabao .next a{display:block;color:#bbb;text-align:center;text-decoration:none;} .mF_tbhuabao .prev a:hover,.mF_tbhuabao .next a:hover{color:#f60;} </style>  </head> <body> <div   class="vvxyksv9kd"   id="myFocus"> <div   id="vvxyksv9kd"   class="loading"><span>請稍候...</span></div> <ul class="pic"> <li><a href="#"><img src="http://547d.ipc.la/img/myfocus/1.jpg" thumb="" alt="圖片1來源于網(wǎng)絡(luò)，版權(quán)屬于作者" text="圖片1更詳細的描述文字" /></a></li> <li><a href="#"><img src="http://547d.ipc.la/img/myfocus/2.jpg" thumb="" alt="版權(quán)屬于作者，圖片2來源于網(wǎng)絡(luò)" text="圖片2更詳細的描述文字" /></a></li> <li><a href="#"><img src="http://547d.ipc.la/img/myfocus/3.jpg" thumb="" alt="圖片3來源于網(wǎng)絡(luò)，版權(quán)屬于作者" text="圖片3更詳細的描述文字" /></a></li> <li><a href="#"><img src="http://547d.ipc.la/img/myfocus/4.jpg" thumb="" alt="版權(quán)屬于作者，圖片4來源于網(wǎng)絡(luò)" text="圖片4更詳細的描述文字" /></a></li> <li><a href="#"><img src="http://547d.ipc.la/img/myfocus/5.jpg" thumb="" alt="圖片5來源于網(wǎng)絡(luò)，版權(quán)屬于作者" text="圖片5更詳細的描述文字" /></a></li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

可隨意更改大小的，里面的參數(shù)已經(jīng)詳細說明了，喜歡的就拿去吧