效果图：
代码如下：
<script type="text/javascript">
onload = function(){
var oBox = document.getElementById('box');
var oLIst1 = document.getElementById('list1');
var aLi1 = oLIst1.getElementsByTagName('li');
var oLIst2 = document.getElementById('list2');
var aLi2 = oLIst2.getElementsByTagName('li');
var oShang = document.getElementById('shang');
var oXia = document.getElementById('xia');
aLi1[0].style.opacity = 1;
aLi1[0].style.filter = 'alpha(opacity=100)';
var size = aLi1.length;
var i = 0;
var timer = setInterval(function(){
i ++;
move();
},2000);
function move(){
if(i >= size){
i = 0
}
if(i < 0){
i = size-1;
}
for(var j = 0; j < aLi1.length; j ++){
if(j == i){
animate(aLi1[j],{opacity:100});
aLi2[j].className = 'active';
}else{
animate(aLi1[j],{opacity:0});
aLi2[j].className = '';
}
}
}
//前一张
oShang.onclick = function(e){
var evt = e || event;
evt.preventDefault();
i --;
move();
}
//后一张
oXia.onclick = function(e){
var evt = e || event;
evt.preventDefault();
i ++;
move();
}
//下面的圆点
for(var k = 0;k < aLi2.length; k ++){
aLi2[k].index = k;
aLi2[k].onmouseenter = function(){
i = this.index;
move();
}
}
oBox.onmouseenter = function(){
clearInterval(timer);
}
oBox.onmouseleave = function(){
timer = setInterval(function(){
i ++;
move();
},2000);
}
/缓冲运动 可封装留着以后备用^_^/
function getStyleAttr(obj,attr){
if (window.getComputedStyle){
return getComputedStyle(obj,null)[attr];
}
else {
return obj.currentStyle[attr];
}
}
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop = true;
for (var attr in json){
var iTarget = json[attr];
var current;
if (attr == "opacity"){
current = parseFloat(getStyleAttr(obj,attr))*100;
current = Math.round(current);
}
else {
current = parseFloat(getStyleAttr(obj,attr));
current = Math.round(current);
}
var speed = (iTarget-current)/8; (400-393)/8
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if (current != iTarget){
bStop = false;
}
if (attr == "opacity"){
obj.style[attr] = (current+speed)/100;
obj.style.filter = "alpha(opacity=" + (current+speed) + ")";
}
else {
obj.style[attr] = current+speed + "px";
}
}
if (bStop){
console.log("停止运动");
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},30);
}
}
