過年換個新環境，離家超近，開車10分鍾就搞定，可以天天回家，爽歪歪。
話說，過來很忙，10幾個java，就咱一個前端，天天苦逼的命。
新的項目上線，首頁里面啥都搞好了，差個圖片輪換效果，用網上現成插件，我了去，不兼容。
一打聽，那哥們居然是jQuery 1.3.2，那哥哥既然用了3年了，無語，佩服中。。。。
給那哥們普及了下jquery發展勢頭，換成最新的1.7.1，反正新項目就用新版本吧。
那插件不用了，不知道哪邊有問題，老是顯示出錯，糾結啊。
還是自己東東手吧，不然都凍僵了。
先給個效果圖看看
大致效果就是 圖片自動輪換，或者點擊右下角那幾個小圖也會去相應的。
后端催命似的，代碼寫的不是很完善，就圖個實現，兼容IE6 IE7 IE8 firefox chrome safari瀏覽器，IE9沒條件測試，還是xp中，大家幫忙提點意見，感激啊。
丑代碼出來見人咯。
<!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>無標題文檔</title>
<style type="text/css">
body,div,ul,li,a,img{margin:0;padding:0}
img{border:none}
ul,li{list-style-type:none}
body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#828282;background:#fff}
.boxx{width:750px;height:400px;margin:0 auto;position:relative}
.boxx_con{width:100%;position:absolute;z-index:10}
.boxx_title{width:200px;height:50px;position:absolute;top:365px;left:510px;z-index:100;}
.boxx_title li{width:32px;height:32px;float:left;margin-left:10px;display:inline;cursor:pointer}
.boxx_title li img{width:32px;height:32px;float:left;}
.bks{border:1px #ccc solid}
</style>
</head>
<body>
<div class="boxx">
<ul class="boxx_con" id="boxx_con">
<li><a href="http://www.cnblogs.com/"><img src="http://img02.taobaocdn.com/imgextra/i2/388921303/T249ylXXNaXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
<li style="display:none"><a href="http://www.cnblogs.com/divcss/"><img src="http://img01.taobaocdn.com/imgextra/i1/388921303/T2r.elXhhXXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
<li style="display:none"><a href="http://www.cnblogs.com/"><img src="http://img03.taobaocdn.com/imgextra/i3/388921303/T2gEilXgXXXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
<li style="display:none"><a href="http://lifesky.taobao.com"><img src="http://img03.taobaocdn.com/imgextra/i3/T223VnXfFNXXXXXXXX-72683792.gif" width="750" height="400"/></a></li>
</ul>
<ul class="boxx_title" id="boxx_title">
<li><img src="http://img02.taobaocdn.com/imgextra/i2/388921303/T249ylXXNaXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
<li><img src="http://img01.taobaocdn.com/imgextra/i1/388921303/T2r.elXhhXXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
<li><img src="http://img03.taobaocdn.com/imgextra/i3/388921303/T2gEilXgXXXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
<li><img src="http://img03.taobaocdn.com/imgextra/i3/T223VnXfFNXXXXXXXX-72683792.gif" width="32" height="32" /></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").attr("target","_blank");
var p=0;
var timeInterval=3000;
var $bli=$("#boxx_con li");
var $pli=$("#boxx_title li");
$bli.hide();
$($bli[0]).show();
function play(){
p<$bli.length-1?p++:p=0;
$bli.eq(p).show().siblings().hide();
$pli.eq(p).addClass("bks").siblings().removeClass("bks");
}
set = window.setInterval(play,timeInterval);
$pli.mouseover(function(){
window.clearInterval(set);
p=$(this).index();
$bli.eq(p).show().siblings().hide();
$pli.eq(p).addClass("bks").siblings().removeClass("bks");
set = window.setInterval(play,timeInterval);
});
})
</script>
</body>
</html>
提供個下載地址 猛擊此處