window.onload=function(){
var odiv=document.getElementById('div');
var oul=odiv.getElementsByTagName('ul')[0];
var oli=oul.getElementsByTagName('oul');
var btn=document.getElementsByTagName('btn');
var ispeed=-1;
var timer=null;
oul.innerHTML+=oul.innerHTML; //图片列表复制一份
oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的宽度的话,运动过程中后面的会先出现再加载图片,有一种不流畅感,切图片过多会分行,由外面的div决定宽度
timer=setInterval(function(){
oul.style.left=oul.offsetLeft+ispeed+'px'; //offsetLeft输出的是数字不带单位,右边也用oul.style.left输出的是字符串,而不是数值,而且它取得是行间样式,无用
if(oul.offsetLeft<-oul.offsetWidth/2){ //判断时也可以用.style.left或.style.width?(不确定)
oul.style.left=0;
}
else if(oul.offsetLeft>0){
oul.style.left=-oul.offsetWidth/2;
}
),30};
btn[0].onmouseover=function(){
ispeed=-1;
};
btn[1].onmouseover=function(){
ispeed=1;
};
oul.onmouseover=function(){
clearInterval(timer);
};
oul.onmouseout=function(){
timer=setInterval(function(){
oul.style.left=oul.offsetLeft+ispeed+'px';
if(oul.offsetLeft<-oul.offsetWidth/2){
oul.style.left=0;
}
else if(oul.offsetLeft>0){
oul.style.left=-oul.offsetWidth/2;
}
),30}; //如果把速度变大,而定时器的时间也变大是否可以达到相同效果呢?答案是不能。会变成一卡一卡
};
};
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有