J.chong

原理

<div id='box'>1,2,3,4</div>
<input type="button" value="切換" id="input"/>

var box = document.getElementById('box')
var input = document.getElementById('input')
input.onclick = function(){
    var arr = box.innerHTML.split(','); //轉換為數組[1,2,3,4]
    arr.push(arr[0]) //第一項加到最後 [1,2,3,4,1]
    arr.shift() //刪除首項 [2,3,4,1]
    box.innerHTML = arr;
}

正式例子
簡陋佈局

<div id="div1">
    <a href="javascript:;" class="prev">←</a>
    <a href="javascript:;" class="next">→</a>
    <ul>
        <li class="pos_1"><img src="../img/h1.jpg" alt="" width="280"/></li>
        <li class="pos_2"><img src="../img/h2.jpg" alt="" width="380"/></li>
        <li class="pos_3"><img src="../img/h3.jpg" alt="" width="480"/></li>
        <li class="pos_4"><img src="../img/h4.jpg" alt="" width="580"/></li>
        <li class="pos_5"><img src="../img/h5.jpg" alt="" width="680"/></li>
        <li class="pos_6"><img src="../img/h6.jpg" alt="" width="580"/></li>
        <li class="pos_7"><img src="../img/h7.jpg" alt="" width="480"/></li>
        <li class="pos_8"><img src="../img/h8.jpg" alt="" width="380"/></li>
        <li class="pos_9"><img src="../img/h9.jpg" alt="" width="280"/></li>
        <li class="pos_10"><img src="../img/h10.jpg" alt="" width="180"/></li>
    </ul>
</div>

    window.onload = function () {
        var div = document.getElementById('div1')
        var li = div.getElementsByTagName('li')
        var a = div.getElementsByTagName('a')
        var arr = []; //放置需要改變的每張圖片的左寬透明度等；
        for (var i = 0; i < li.length; i++) {
            var img = li[i].getElementsByTagName('img')[0]
            arr.push([parseInt(getStyle(li[i], 'left')), parseInt(getStyle(li[i], 'top')), getStyle(li[i], 'opacity') * 100, getStyle(li[i], 'zIndex'), img.width])
        }
        a[0].onclick = function () {
            arr.push(arr[0]);//先把第一項放到後面  1，2，3，4，1
            arr.shift() //再刪除第一項   2，3，4，1
            for (var i = 0; i < li.length; i++) {
                var img = li[i].getElementsByTagName('img')[0]  //圖片需要重新獲取，不寫則錯亂
                li[i].style.zIndex = arr[i][3]  //更改透明度
                startMove(li[i], {left: arr[i][0], top: arr[i][1], opacity: arr[i][2]})  //加入運動函數
                startMove(img, {width: arr[i][4]})  //更改圖片寬度
            }
        }
        a[1].onclick = function () {
            arr.unshift(arr[arr.length - 1]);//最後一項放到第一位  4,1,2,3,4
            arr.pop() //再刪除最後一項   4,1,2,3
            for (var i = 0; i < li.length; i++) {
                var img = li[i].getElementsByTagName('img')[0]  //圖片需要重新獲取，不寫則錯亂
                li[i].style.zIndex = arr[i][3]  //更改透明度
                startMove(li[i], {left: arr[i][0], top: arr[i][1], opacity: arr[i][2]})  //加入運動函數
                startMove(img, {width: arr[i][4]})  //更改圖片寬度
            }
        }
    }

*{margin:0;padding:0}li{list-style:none;position:absolute;left:0;top:0;overflow:hidden}#div1{width:680px;margin:0 auto;position:relative;top:30px}.pos_1{opacity:.2;z-index:0;left:-200px}.pos_2{opacity:.4;z-index:0;left:-150px}.pos_3{opacity:.6;z-index:0;left:-100px}.pos_4{opacity:.8;z-index:0;left:-50px}.pos_5{opacity:1;z-index:5;left:0}.pos_6{opacity:.8;z-index:4;left:150px}.pos_7{opacity:.6;z-index:3;left:300px}.pos_8{opacity:.4;z-index:2;left:450px}.pos_9{opacity:.2;z-index:1;left:600px}.pos_10{opacity:0;z-index:0;left:750px}.next,.prev{display:inline-block;width:60px;height:40px;background-color:#E4E4E4;position:absolute;color:#373737;z-index:6;line-height:40px;font-size:40px;text-align:center;text-decoration:none;opacity:.8}.prev{left:0;top:190px}.next{right:0;top:190px}.next a:hover,.prev a:hover{opacity:1;color:#000}

運行

<div id="div1"></div>

    window.onload = function () {
        var s1 = new Sel('div1');
        s1.add('0',['中國','美國','日本'])
        s1.add('0_0',['深圳','廣州','北京'])
                 s1.add('0_0_0',['寶安','南山','福田'])
                 s1.add('0_0_1',['天河','越秀','海珠'])
                 s1.add('0_0_2',['西城','東誠','崇文'])
        s1.add('0_1',['波士顿','芝加哥','休斯敦'])
                s1.add('0_1_0',['子波士1','子波士2','子波士3'])
                s1.add('0_1_1',['子芝加1','子芝加2','子芝加3'])
                s1.add('0_1_2',['子休斯1','子休斯2','子休斯3'])
        s1.add('0_2',['東京','横滨','大阪'])
                s1.add('0_2_0',['子東京1','子東京2','子東京3'])
                s1.add('0_2_1',['子横滨1','子横滨2','子横滨3'])
                s1.add('0_2_2',['子大阪1','子大阪2','子大阪3'])
        s1.init(3);

    }
//寫構造函數
    function Sel(id) {
        this.oParent = document.getElementById(id);  //ID變成對象的屬性；
        this.data = {} //寫對象存函數 key = value
        this.aSel = this.oParent.getElementsByTagName('select'); //創建全局屬性，獲取所有select才能找到 獲得第一個select aSel[0]
    }
//寫原型
    Sel.prototype = {
//初始化
        init: function (num) {
            var This = this; //原型對像
            for (i = 1; i <= num; i++) {
                var oSel = document.createElement('select');
                var oPt = document.createElement('option');
                oPt.innerHTML = '默認';
                oSel.appendChild(oPt);
                oSel.index = i;
                this.oParent.appendChild(oSel)
                oSel.onchange = function () {
                    This.change(this.index) //this改變指向  this是下拉菜單，This對象
                }
            }
            this.first();
        },
        add: function (key, value) {
            this.data[key] = value;
        },
        first: function () {
            var arr = this.data['0'];//得到key 比如 s1.add('0',['中國','美國','日本'])  this.date['0'];得到['中國','美國','日本']
            for (var i = 0; i < arr.length; i++) {
                var oPt = document.createElement('option');
                oPt.innerHTML = arr[i] // ['中國','美國','日本']
                this.aSel[0].appendChild(oPt)
            }
        },
        //開始做第一個onchange下拉事件。
        change: function (iNow) { //iNow 當前下拉菜單的索引 0 1 2 3 
            var str = '0';
            for(var i = 0;i<iNow;i++){
                str += '_'+ (this.aSel[i].selectedIndex - 1);
                //s1.add('0',['中國','美國','日本']) 因為前面還有個默認，select裏一共有四個值，選擇1的索引值是1 但所對應的應該是 s1.add('0_0',['深圳','廣州','北京'])中的0_0,要開成這個形式必須 - 1
            }
            if( this.data[str] ){ //0_0 0_1 0_2
                var arr = this.data[str] //對應第二項數組['深圳','廣州','北京'] ['波士顿','芝加哥','休斯敦']['東京','横滨','大阪']
                this.aSel[iNow].options.length = 1; //只保留‘默認’這一項option
                for( var i = 0;i<arr.length;i++){
                    var oPt = document.createElement('option');
                    oPt.innerHTML = arr[i];
                    this.aSel[iNow].appendChild(oPt);
                }
                this.aSel[iNow].options[1].selected = true //選第一項時第二項自動變直接選中
                iNow++;  //遞歸，連動三個
                if(iNow < this.aSel.length){
                    this.change(iNow)
                }
            }
            else{//選擇默認時走else
                if(iNow < this.aSel.length)//小於下位菜單的長度；
                this.aSel[iNow].options.length = 1; //選擇默認時變回來
            }
        }
    }

運行