慕粉3660134
2016-10-18 15:16
为什么代码和老师敲的一点击箭头图片老是第一张
window.onload=function () {
var container =document.getElementById("container");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var index=1;
var animated =false;
function showb() {
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on"){
buttons[i].className="";
break;
}
}
buttons[index -1].className ="on";
}
function animate(offset) {
animated=true;
var news=parseInt(list.style.left)+offset;
var time=300; //总时间
var interval =10; //间隔时间
var speed=offset/(time/interval);
function go() {
if ((speed < 0 && parseInt(list.style.left)>news) || (speed>0 && parseInt(list.style.left)<news)) {
list.style.left=parseInt(list.style.left)+speed+"px";
setTimeout(go,interval);
// statement
}
else{
animated=false;
list.style.left =news+"px";
if (news>-600) {
list.style.left=-3000+"px";
}
if (news<-3000 ){
list.style.left=-600+"px";
}
}
}
go();
}
next.onclick=function () {
if (index==5) {
index=1;
}
else {
index+=1;
}
showb();
if (!animated) {
animate(-600);
}
}
prev.onclick=function () {
if (index==1) {
index=5;
}
else {
index-=1;
}
showb();
if (!animated) {
animate(600);
}
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
if (animate) {
return;
}
if(this.className == 'on') {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -600 * (myIndex - index);
showb();
if (!animated) {
animate(offset);
index = myIndex;
}
}
}
}
焦点图轮播特效
65279 学习 · 611 问题
相似问题