左右按钮，切换多张图片

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>

注：简化一模一样（重复）的代码要用函数包起来（在初始化时就要包起来）。