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>Untitled Page</title>
<!--<script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>-->
<script type="text/javascript" src="jquery1.3.2.min.js"></script>
<script type="text/javascript">
var t = n = count = 0;
$(function () {
var piclist = $(".piclist img");
var numlink = $(".num li");
count = piclist.length;
$(".piclist img:not(:first-child)").hide();
$(numlink).filter(":first-child").addClass("on");
$(numlink).each(function (i) {
$(this).click(function () {
$(piclist).filter(":visible").fadeOut(500);
$(piclist).eq(i).fadeIn(1000);
$(this).addClass("on").siblings().removeClass("on");
});
});
t = setInterval("showAuto()", 2000);
$("#pause").click(function () { clearInterval(t); });
$("#play").click(function () { t = setInterval("showAuto()", 2000); });
});
function showAuto() {
n = n >= (count - 1) ? 0 : n + 1;
$(".num li").eq(n).trigger("click");
}
</script>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
list-style: none;
}
.picshow
{
width: 300px;
height: 300px;
position: relative;
}
.num
{
position: absolute;
bottom: 10px;
right: 10px;
}
.num li
{
float: left;
background: #CCC;
margin: 0 2px;
padding: 0 3px;
cursor: pointer;
}
.num li.on
{
background: #F00;
}
.piclist{ position:relative;}
.piclist img{ position:absolute;}
</style>
</head>
<body>
<div class="picshow">
<div class="piclist">
<img src="image/pic1.jpg" width="300" height="300" alt="" />
<img src="image/pic2.jpg" width="300" height="300" alt="" />
<img src="image/pic3.jpg" width="300" height="300" alt="" />
</div>
<ul class="num">
<li>1</li><li>2</li><li>3</li></ul>
</div>
<div id="pause">暂停</div>
<div id="play">播放</div>
</body>
</html>