html：

<div id="content">
    <a href="javascript:;" id="prev"><</a>
    <a href="javascript:;" id="next">></a>
    <p id="txt1">正在載入中......</p>
    <span id="span1">數量正在計算中......</span>
    <img alt="" id='img1'>      
</div>

css：

<style>
    #content {
        width: 112px;
        height: 199px; 
        margin: 40px auto;          
        position: relative;
    }
    #content a {
        width: 20px;
        height: 20px;
        background-color: #ccc;
        border: 2px solid #fff;
        text-align: center;
        text-decoration
 
: none;
        font-size: 20px;
        font-weight: 700;
        filter: alpha(opacity: 60);/* 透明度相容IE */
        opacity: 0.6;/* 相容主流瀏覽器 */
        position: absolute;
        top: 80px;
    }
    #content a:hover {
        background-color: pink;
        filter: alpha(opacity: 90);/* 透明度相容IE */
        opacity
 
: 0.9;/* 相容主流瀏覽器 */
    }
    #prev {left: -40px;}
    #next {right: -40px;}
    #txt1,#span1 {
        width: 112px;
        position: absolute;         
        left: 0;
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #fff;            
        background-color: #000;
        opacity: 0.5;
    }
    #txt1 {bottom: 0;margin: 0;}
</style>

js：

<script>
    window.onload = function(){
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var txt1 = document.getElementById('txt1');
        var span1 = document.getElementById('span1');
        var img1 = document.getElementById('img1');

        var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
        var arrTxt = ['海上帆船','粉色檯燈','海邊風景','照相機'];

        var num = 0;
        // 初始化顯示內容
        function fnTab(){//重複的程式碼要用函式包起來
            span1.innerHTML = num+1 +'/' + arrUrl.length;// 1/4，因為計數是從1開始，所以num要加1
            img1.src = arrUrl[num];//動態獲取陣列中圖片，先載入第一張圖片，因為num是0
            txt1.innerHTML = arrTxt[num];//動態獲取陣列中文字，先顯示陣列中第一個文字，因為num是0
        }
        fnTab();//呼叫函式，fnTab()代表執行函式裡面的三行程式碼

        next.onclick = function(){
            num ++;//num自增1
            if(num == arrUrl.length){//如果num的值超過陣列的長度
                num = 0;//恢復到第一張圖片（陣列中是從0 開始數）
            }               
            fnTab();// 然後相應載入的內容進行變動
        }
        prev.onclick = function(){
            num --;
            if(num == -1){
                num = arrUrl.length - 1;//如果圖片已經在第一張，還點選上一張，那麼讓圖片顯示最後一張，即陣列長度減1為陣列最後一張圖片
            }
            fnTab();
        }
    }
</script>

注：簡化一模一樣（重複）的程式碼要用函式包起來（在初始化時就要包起來）。