jquery制作仿flash幻灯片
效果图：
<!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>Untitled Page</title>
<style type="text/css">
*{margin:0;padding:0}
ul,li{list-style-type:none;}
img{border:0; }
.pic-show{width:360px;height:190px;overflow:hidden;position:relative;}
.ui-pic{position:absolute;}
.ui-pic li{height:190px;overflow:hidden;position:absolute;}
.pic-show .ui-btn{position:absolute;right:2px;bottom:2px;}
.pic-show .ui-btn li{float:left;width:15px;height:15px;margin-right:3px;border:1px solid #eee;background-color:#ffffff;line-height:15px;font-size:12px;text-align:center;}
.pic-show .ui-btn li.on{background-color:#ee6921;color: #ffffff}
</style>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript">
$.fn.flashAlbum = function () {
var wrap = $(this);
var picList = $(".ui-pic li");
var btnList = $(".ui-btn li");
var i = 0;
var timer;
picList.eq(i).siblings().hide();
btnList.eq(i).addClass("on");
startGo();
wrap.hover(stopGo, startGo);
btnList.mouseover(function () { go(btnList.index(this)); });
function go(n) {
picList.eq(n).fadeIn("slow").siblings().hide();
btnList.eq(n).addClass("on").siblings().removeClass("on");
}
function startGo() {
timer = setInterval(function () { if (i >= 5) i = 0; go(i); i++; }, 2000);
}
function stopGo() {
clearInterval(timer);
}
}
$(function () { $(".pic-show").flashAlbum(); });
</script>
</head>
<body>
<div class="pic-show">
<ul class="ui-pic">
<li><a href="" title="" target="new"><img src="images/01.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/02.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/03.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/04.jpg" /></a></li>
<li><a href="" title="" target="new"><img src="images/05.jpg" /></a></li>
</ul>
<ul class='ui-btn'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
