Question

为什么我这段js代码在IE8下不起作用 （我把几张图片切在一起做成一张png，想用一张图片图片切换效果）

js代码：
function btnleft()
{
var elem=document.getElementById('carousel-pictures');
var backgroundPosition="";
if(elem.currentStyle)
{
backgroundPosition=elem.currentStyle.backgroundPosition||document.defaultView.getComputedStyle(elem,null).backgroundPosition;
}else if(document.defaultView)
{
backgroundPosition=document.defaultView.getComputedStyle(elem,null).backgroundPositionX.split('px')[0];
if(backgroundPosition==(-3745)){
backgroundPosition=749;
backgroundPosition=backgroundPosition-749+'px';
}else{
backgroundPosition=backgroundPosition-749+'px';
}
elem.style.backgroundPositionX=backgroundPosition;
}
// setTimeout("btnleft()",2000);

}
function auto()
{
btnleft();
setTimeout("auto()",2000);

}
function btnright()
{
var elem=document.getElementById('carousel-pictures');
var backgroundPosition="";
if(elem.currentStyle)
{
backgroundPosition=elem.currentStyle.backgroundPosition||document.defaultView.getComputedStyle(elem,null).backgroundPosition;
}else if(document.defaultView)
{
backgroundPosition=document.defaultView.getComputedStyle(elem,null).backgroundPositionX.split('px')[0];
if(backgroundPosition==0){
backgroundPosition=(-3745);
backgroundPosition=backgroundPosition-(-749)+'px';
}else{
backgroundPosition=backgroundPosition-(-749)+'px';
}
elem.style.backgroundPositionX=backgroundPosition;
}
// setTimeout("btnleft()",2000);

}
function start(){
setTimeout("auto()",2000);
}

Answer 1

var getStyle = function(elem, attr) {
    return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem, false)[attr];
}
var GAP = 749,
    COUNT = 5;

function btnleft() {
    var elem = document.getElementById('carousel-pictures');
    var bp = getStyle(elem, "backgroundPosition");
    if(bp){
        var arr = bp.split(/\s+/);
        var bpx = parseFloat(arr[0]),
            bpy = arr[1];
        bpx -= GAP;
        if (bpx <= (-GAP * COUNT)) {
            bpx = GAP;
        }
        bpx += "px";
        elem.style.backgroundPosition = bpx + " " + bpy;
    }else{
        var bpx = getStyle(elem, "backgroundPositionX");
        bpx -= GAP;
        if (bpx <= (-GAP * COUNT)) {
            bpx = GAP;
        }
        bpx += "px";
        elem.style.backgroundPositionX = bpx;
    }
}

function auto() {
    btnleft();
    setTimeout("auto()", 2000);
}

function btnright() {
    var elem = document.getElementById('carousel-pictures');
    var bp = getStyle(elem, "backgroundPosition");
    if(bp){
        var arr = bp.split(/\s+/);
        var bpx = parseFloat(arr[0]),
            bpy = arr[1];
        bpx += GAP;
        if (bpx >= 0) {
            bpx -= GAP * COUNT;
        }
        bpx += "px";
        elem.style.backgroundPosition = bpx + " " + bpy;
    }else{
        var bpx = getStyle(elem, "backgroundPositionX");
        bpx += GAP;
        if (bpx >= 0) {
            bpx -= GAP * COUNT;
        }
        bpx += "px";
        elem.style.backgroundPositionX = bpx;
    }
}

function start() {
    setTimeout("auto()", 2000);
}