
po上代码
<script>
window.onload = function(){
var content = document.getElementById('content'),
list = document.getElementById('list'),
buttons = document.getElementById('buttons'),
icon = buttons.getElementsByTagName('li'),
prev = document.getElementById('prev'),
next = document.getElementById('next'),
index = 1, //默认点亮第一个icon
animate = false;//动画运行初始关闭
function showIcon(){
for(var i = 0; i < icon.length; i++){
if(icon[i].className == 'on'){
icon[i].className = '';
}
}
icon[index - 1].className = 'on';
}
function animate(offste){
animate = true;
var newLeft = parseInt(list.style.left) + offste;
var time = 300;//移动总时间
var inteval = 10;//移动间隔时间
var speed = offste/(time/inteval);//每次位移量
function go(){
//如果在移动的时候
if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, inteval)//递归
}else{
animate = false;
list.style.left = newLeft + 'px';
if(newLeft > -500){
list.style.left = -2500 + 'px';
}if(newLeft < -2500){
list.style.left = -500 + 'px';
}
}
}
go();
}
next.onclick = function(){
if(index == 5){
index = 1;
}else{
index +=1;
}
showIcon();
if(!animate){
animate(-500);
}
};
prev.onclick = function(){
if(index == 1){
index = 5;
}else{
index -= 1;
}
showIcon();
if(!animate){
animate(500);
}
}
//按钮切换
for(var i = 0; i < icon.length; i++){
icon[i].onclick = function(){
if(this.className == 'on'){ //当点击的按钮为当前状态时,跳出函数。不重复执行
return;
}
var myIndex = parseInt(this.getAttribute('index')); //获取Icon的index属性值
var offset = -500 * (myIndex - index); //偏移量=(当前点击的按钮对应图片的偏移量-初始偏移量)* -500;
if(!animate){
animate(offset);
}
index = myIndex; //点击后index索引值归为当前状态
showIcon();
}
}
}
</script>已解决。。。