<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0;
padding: 0;
}
#div1{
600px;height:400px;border:1px solid #000;margin: 100px auto 0; position: relative;overflow:hidden;
}
#ul1{
position: absolute;left: 0;top: 0;margin: 0;padding: 0;
}
li{
list-style-type: none;float: left;
}
img{display: block;}
#div1 p { text-align: center; position: absolute; 100%; bottom: 10px;}
#div1 p span {padding: 2px 9px; background: #CCC; border-radius: 50%; margin-left: 5px; cursor: pointer;}
#div1 p span.current { background:#F90;}
</style>
<script>
window.onload = function (){
var odiv = document.getElementById('div1');
var oul = document.getElementById('ul1');
var ali = oul.getElementsByTagName('li');
var aspan = odiv.getElementsByTagName('span');
var ilen = ali.length;
var iwidth = ali[0].offsetWidth;
oul.style.width = ilen * iwidth + 'px';
for(var i = 0; i < ilen; i++)
{
aspan[i].index = i;
aspan[i].onclick = function(){
for(var i = 0; i < ilen; i++)
{
aspan[i].className = '';
}
this.className = 'current';
startMove(oul, {
left : -this.index * iwidth
});
}
}
}
function startMove(obj, json, fn) {
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0;
obj.iTimer = setInterval(function() {
var iBtn = true;
for ( var attr in json ) {
var iTarget = json[attr];
if (attr == 'opacity') {
iCur = Math.round(css( obj, 'opacity' ) * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = ( iTarget - iCur ) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != iTarget) {
iBtn = false;
if (attr == 'opacity') {
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if (iBtn) {
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
</script>
</head>
<body>
<div id = "div1">
<ul id="ul1">
<li><img src="img/5-1.jpg"></li>
<li><img src="img/5-2.jpg"></li>
<li><img src="img/5-3.jpg"></li>
<li><img src="img/5-4.jpg"></li>
<li><img src="img/5-5.jpg"></li>
<li><img src="img/5-6.jpg"></li>
</ul>
<p>
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
</body>
</html>