在本人看来轮播的重点是如何使用计时器,目前我接触的轮播大致上分两种,一种有过渡的轮播和另一种没过渡的轮播,一种是将多张图片放入同一个标签下将其视做一张大的图片,或者干脆是一张大的图片,另一种是将通过改变属性display来实现轮播但是我不会。
我们来说第一种,这一种是将几张图片放入一个标签,大概就是这样的
它通过移动一定量的像素来实现轮播,
这个轮播分为两个部分,第一将计算要移动的距离。
var tranfor=false;//是否在运动
var index=1;//记录当前图片的位置
var timer=null;//计时器
window.onload=function(){
function animate(offset){//offset 移动的距离
tranfor=true;
var list=document.getElementById("list");
var newleft=0;
var time=30;//300ms 总的运行时间
var interval=10;//间隔时间 总的运行次数=time/interval
var speed=offset/(time/interval);//每次运动的距离
newleft=parseInt(list.style.left)+offset;//parseInt()将字符串 转换为一个数字类型
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,interval);//
}else{
list.style.left=newleft+"px";
if(newleft>-670){
list.style.left=-670*5+"px";
}
if(newleft<-670*5){
list.style.left=-670+"px";
}
tranfor=false;
}
}
go();
}
图片向左移动 传递过来的值是负数 speed<0,list.style.left的值逐渐减小,所以只要是list.style.left大于newleft的值,那么就应该要调用go方法
speed>0&&parseInt(list.style.left)<newleft,图片向右移动
传递过来的值是整数 speed>0 ,list.style.left的值逐渐增大,所以只要是list.style.left小于newleft的值 那么就应该要调用go方法
然后通过getElementById()方法通过元素ID找到该元素,写一个点击事件每一次点击移动一定量的像素,再利用setInterval方法来循环这个点击事件,以下是代码:
var prev=document.getElementById("prev");//
var next=document.getElementById("next");
var bottons=document.getElementById("bottons").getElementsByTagName("span");
var container=document. getElementById("container");
prev.onclick=function(){
if(index===1){
index=5;
}else{
index--;
}
if(tranfor===true){
return;
}
animate(670);
};
next.onclick=function(){
if(tranfor===true){
return;
}
if(index===5){
index=1;
}else{
index++;
}
animate(-670);
};
for(var i=0;i<bottons.length;i++){
bottons[i].onclick=function(){
if(tranfor===true){
return;
}
var myindex=this.getAttribute("index");//获取属性值
var offset=-670*(myindex-index);
animate(offset);
index=myindex;
};
}
function play(){
timer=setInterval(function(){
next.onclick();
},200);
}
function stopPlay(){
clearInterval(timer);
}
play ();
container.onmousemove=stopPlay;
container.onmouseout=play;
};