发新贴  快速回复

自适应屏幕宽度的轮播图

妙味用户881477
2019-08-24 23:20

代码跟老师差不多,效果完全不一样,找了半天,不知道是哪里出了问题,请老师帮忙看一下

附件下载:
 

本帖内容针对以下视频发布:

自适应屏幕宽度的轮播图
2017年2月8日

把需要用到的js也上传

2019-08-26 09:45  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:13  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:14  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:14  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:14  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:14  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:14  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:14  回复本帖
妙味用户881477

2017年2月8日 2019-08-26 09:45发表的内容:

把需要用到的js也上传

这是move.js代码

function startMove(obj,json,endFn){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var bBtn = true;

for(var attr in json){

var iCur = 0;

if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}

var iSpeed = (json[attr] - iCur)/20;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}

if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;

}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}


}

if(bBtn){
clearInterval(obj.timer);

if(endFn){
endFn.call(obj);
}
}

},30);

}


function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
2019-08-26 21:14  回复本帖
妙味用户881477

 

// JavaScript Document

function startMove(obj,json,endFn){
    
        clearInterval(obj.timer);
        
        obj.timer = setInterval(function(){
            
            var bBtn = true;
            
            for(var attr in json){
                
                var iCur = 0;
            
                if(attr == 'opacity'){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
                    
                    }
                    else{
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                    }   
                }
                else{
                    iCur = parseInt(getStyle(obj,attr)) || 0;
                }
                
                var iSpeed = (json[attr] - iCur)/20;
            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur!=json[attr]){
                    bBtn = false;
                }
                
                if(attr == 'opacity'){
                    obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
                    obj.style.opacity = (iCur + iSpeed)/100;
                    
                }
                else{
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
                
                
            }
            
            if(bBtn){
                clearInterval(obj.timer);
                
                if(endFn){
                    endFn.call(obj);
                }
            }
            
        },30);
    
    }
    
    
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

 

2019-08-26 21:15  回复本帖
2017年2月8日

把定时器的时间设置长点就不会了。例如setInterval(toRun,5000);

因为,图片出来到结束的时间比定时器还要大,导致还没有走完,又开始了下一次。

left那些就无法还原,bug就出来了。

要么让图片动画时间快点,要么让setInterval长点。

总之不要冲突即可。

2019-08-29 10:16  回复本帖
妙味用户881477

2017年2月8日 2019-08-29 10:16发表的内容:

把定时器的时间设置长点就不会了。例如setInterval(toRun,5000);

因为,图片出来到结束的时间比定时器还要大,导致还没有走完,又开始了下一次。

left那些就无法还原,bug就出来了。

要么让图片动画时间快点,要么让setInterval长点。

总之不要冲突即可。

好的,谢谢老师
2019-08-29 20:31  回复本帖
登录 后才可以发表回复