jq js-輪播圖，不斷變化的背景色和圖片輪播問題？

輪播圖，不斷變化的背景色和圖片輪播問題？

類似現在天貓首頁的輪播圖效果，背景色是一個色塊，沒秒變換一個背景色和一個圖
片，。注意背景色塊是可以隨著頁面寬度無限變寬的，而圖片是一個固定大小居中的
圖片。

求各位大神指導！
沒錢 一個C幣聊表心意T_T

最佳回答：

我這裡只弄了兩張圖片的輪播，時間和圖片數理你可以自己改
script language="javascript" type="text/javascript">
window.onload = function () {
var index = 1;
var switching = false;

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var list = document.getElementById('list');
var wrap = document.getElementById('wrap');
var dots = document.getElementsByTagName('span');
var buttons = document.getElementById('buttons');

wrap.onmouseover = function () {
prev.style.display = 'block';
next.style.display = 'block';
stop();
};
wrap.onmouseout = function () {
prev.style.display = 'none';
next.style.display = 'none';
play();
}

function lastImg() {
    if (switching) {
        return;
    }
    switchPic(1420);
    index--;
    if (index < 1) {
        index = 2;
    }
    else if(index  > 2) {
        index = 1;
    }
    lightDot();
}

function nextImg() {
    if (switching) {
        return;
    }
    switchPic(-1420);
    index++;
    if (index < 1) {
        index = 2;
    }
    else if(index  > 2) {
        index = 1;
    }
    lightDot();
}

function btn(e) {
    if (switching) {
        return;
    }
    e = window.e || e;
    var target = e.target ? e.target: e.srcElement;
    if (target.nodeName.toLowerCase() == 'span') {
        var index1 = target.getAttribute('index');
        var offset = (index - index1) * 1420;
        switchPic(offset);
        index = index1;
        lightDot();
    }
};

// 切換圖片的函數
function switchPic(offset) {
    switching = true;
    var time = 400;
    var inter = 10; 
    var speed = Math.ceil(offset/(time/inter));

    var left = parseInt(list.style.left) + offset;

    var go = function () {
        var curLeft = parseInt(list.style.left);
        if ((speed > 0 && curLeft < left) || (speed < 0 && curLeft > left)) {
            list.style.left = curLeft + speed + 'px';
            setTimeout(go, inter);
        }
        else {
            list.style.left = left + 'px';
            if (left < -2840) {
                list.style.left = -1420 + 'px';
            }
            else if (left > -1420) {
                list.style.left = -2840 + 'px';
            }
            switching = false;
        }
    };
    go();
}

// 點亮小點
function lightDot() {
    for (var i = 0, len = dots.length; i < len; i++) {
        if (dots[i].className == 'light') {
            dots[i].className = '';
            break;
        }
    }
    dots[index-1].className = 'light';
}

// 自動輪播
var timer;
var order;
var interval;
var play = function () {
    var interval1 = interval || 4000;
    if (order == 'prev') {
        timer = setInterval(lastImg, interval1);
    }
    else {
        timer = setInterval(nextImg, interval1);
    }
};
var stop = function () {
    clearInterval(timer);
};

// 事件綁定DOM2
function addEvent(element, event, listener) {
    if (element.addEventListener) {
        element.addEventListener(event, listener, false);
    }
    else {
        element.attachEvent('on'+event, listener);
    }
}


// 點擊左右鍵切圖
addEvent(prev, 'click', lastImg); 
addEvent(next, 'click', nextImg);
// 點擊小點切圖
addEvent(buttons, 'click', btn); 

// 指定切換順序和間隔時間
order = 'next';
interval = 4000;

play();

};