jquery制作图片幻灯片插件
效果图：
<!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>
<title></title>
<style type="text/css">
body {text-align: center;margin:0;padding:0;background: #FFF;font-size:12px;color:#353535;font-family: "����";}
div,form,img,ul,ol,li,dl,dt,dd,label {margin: 0; padding: 0; border: 0;}
table,td,tr,th{font-size:12px;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
img{border:0;}
li{list-style-type:none;}
/*-------------------------------------------------------*/
/*****��ҳFLASHͼƬ�л�*****/
#ifocus { width:689px; height:244px;border:1px solid #DEDEDE; background:#F8F8F8;}
#ifocus_pic { display:inline; position:relative;float:left;width:570px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist li { width:570px; height:225px; overflow:hidden; display:none}
#ifocus_piclist img { width:570px; height:225px;}
#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0;}
#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
#ifocus_btn .current { background: url(images/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv { position:absolute; left:0; bottom:0; width:570px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
#ifocus_tx .normal { display:none; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var li_pic = $("#ifocus_piclist li");
var li_btn = $("#ifocus_btn li");
var goI = 0;
var timer;
li_pic.eq(goI).show();
startGo();
$("#ifocus").hover(stopGo, startGo);
li_btn.mouseenter(function () {
var index = li_btn.index(this);
go(index);
});
function go(i) {
li_pic.eq(i).fadeIn(1000).siblings().hide();
li_btn.eq(i).addClass("current").siblings().removeClass();
goI++;
}
function startGo() {
timer = setInterval(function () { if (goI >= 4) goI = 0; go(goI); }, 2000);
}
function stopGo() { clearInterval(timer); }
});
</script>
</head>
<body>
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left:0; top:0;">
<ul>
<li><a href="#" target="_blank"><img src="images/center.jpg" alt="校园模特招聘" /></a></li>
<li><a href="#" target="_blank"><img src="images/02.jpg" alt="网上有名" /></a></li>
<li><a href="#" target="_blank"><img src="images/03.jpg" alt="网上有名" /></a></li>
<li><a href="#" target="_blank"><img src="images/04.jpg" alt="网上有名" /></a></li>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
<li class="current" id="p0"><img src="images/center.jpg" alt="" /></li>
<li id="p1"><img src="images/btn_02.jpg" alt="" /></li>
<li id="p2"><img src="images/btn_03.jpg" alt="" /></li>
<li id="p3"><img src="images/btn_04.jpg" alt="" /></li>
</ul>
</div>
</div>
</body>
</html>
