标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>jQuery Easy Slider</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
#slider {
overflow: hidden;
width: 220px;
height: 160px;
border: 3px solid #EEE;
padding: 1px;
margin: 60px auto 0;
}
#slider li {
position: relative;
left: 0;
top: 0;
list-style: none;
}
</style>
<script src="jquery.js"></script>
<script>
function slider(id) {
fir = $(id + ‘ li:first‘);
fir.addClass("active");
$(id + ‘ li‘).not(‘:first‘).hide();
setInterval(function () {
act = $(id + ‘ li.active‘);
if(act.next().val() != undefined) {
act.hide(0, function() {
act.next().show();
act.removeClass("active");
act.next().addClass("active");
});
} else {
act.hide(0, function() {
fir.show();
act.removeClass("active");
fir.addClass("active");
});
}
}, 2000);
}
$(document).ready(function() {
slider(‘#slider‘);
});
</script>
</head>
<body>
<ul id="slider">
<li><a href="./1"><img src="1.png" /></a></li>
<li><a href="./2"><img src="2.png" /></a></li>
<li><a href="./3"><img src="3.png" /></a></li>
<li><a href="./4"><img src="4.png" /></a></li>
</ul>
</body>
</html>
标签：
原文地址：http://my.oschina.net/eechen/blog/527600
