一、效果图。

二、HTML+CSS代码。

<style>

.box1{width:800px; margin:30px auto; text-align:center;}
.box1 input{ margin:0 5px; padding:5px 8px; background:#ff6600; cursor:pointer; color:#fff; border-radius:5px; font-size:14px;}
.box1 p{ line-height:50px; font-size:18px;}
.box{ width:800px; height:500px; margin:30px auto; position:relative;}
.box img{width:800px; height:500px;}
.box a{ width:40px;  height:100px;}
.box .prev{background:url(img/btn.png) 10px 40px no-repeat; position:absolute; left:0; top:200px;}
.box .next{background:url(img/btn.png) -70px 40px no-repeat; position:absolute; right:0; top:200px;}
.box .prev:hover{background:#000 url(img/btn.png) 10px 40px no-repeat;opacity:0.6; filter:alpha(opacity=60);}
.box .next:hover{background:#000 url(img/btn.png) -70px 40px no-repeat;opacity:0.6; filter:alpha(opacity=60);}
.div1,.div2{ width:100%; height:40px; background:#000; opacity:0.6; filter:alpha(opacity=60);}
.div1,.span{position:absolute; left:0; top:0; z-index:1;}
.div2,.word{position:absolute; left:0; bottom:0;z-index:1;}
.span,.word{ z-index:100; color:#fff; text-align:center; line-height:40px; font-size:14px; width:100%;}
</style>

<div class="box1" id="box1">

    <input type="button" value="循环切换" id="btn" /><input type="button" value="顺序切换" id="btn1" />
    <p id="p">图片可从最后一张跳转到第一张循环切换</p>
</div>
<div class="box">
    <a href="javaScript:;" id="prev" class="prev"></a>
    <a href="javaScript:;" id="next" class="next"></a>
    <span id="span" class="span">图片张数正在加载中...</span>
    <p id="word" class="word">文字描述正在加载中...</p>
    <img src="img/img1.jpg" id="img" class="img" />
    <div class="div1"></div>
    <div class="div2"></div>
</div>

三、javaScript代码。

<script>

window.onload = function(){

    var oPrev = document.getElementById('prev');
    var oNext = document.getElementById('next');
    var oSpan = document.getElementById('span');
    var oWord = document.getElementById('word');
    var oImg = document.getElementById('img');
    var oBtn = document.getElementById('btn');
    var oBtn1 = document.getElementById('btn1');
    var oP = document.getElementById('p');
    var arrTxT=['家具装饰一','家具装饰二','家具装饰三','家具装饰四'];
    var arrImg=['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg'];
    var arrP=['图片可从最后一张跳转到第一张循环切换','图片只能到最后一张或只能到第一张切换'];
    
    var iNum =0;
    var off=true;
    
    oBtn.onclick = function(){
    
        oP.innerHTML=arrP[0];
        off=true;
    };
    oBtn1.onclick = function(){
    
        oP.innerHTML=arrP[1];
        off=false;
    };
    
    
    function fnAdd(){
        oSpan.innerHTML=(iNum+1)+'/'+arrImg.length;
        oWord.innerHTML=arrTxT[iNum];
        oImg.src=arrImg[iNum];
    }
    fnAdd();
    
    oPrev.onclick = function(){
        iNum--;
        if(iNum==-1){
            if(off){
                iNum=arrImg.length-1;
            }else{
                alert('这是第一张，不能在点了');
                iNum=0;
            }
            
        }
        fnAdd();
    };
    
    oNext.onclick = function(){
        iNum++;
        if(iNum==arrImg.length){
            
            if(off){
                iNum=0;
            }else{
                alert('已经是最后一张了');
                iNum=arrImg.length-1;
            }
        
        }
        fnAdd();
    
    };
    
}

</script>

四、jquery代码。

<script>

$(function(){

    
    var arrTxT=['家具装饰一','家具装饰二','家具装饰三','家具装饰四'];
    var arrImg=['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg'];
    var arrP=['图片可从最后一张跳转到第一张循环切换','图片只能到最后一张或只能到第一张切换'];
    var off=true;
    var iNum=0;
    $('#box1 input').eq(0).click(function(){
        
        $('#box1 p').eq(0).html(arrP[0]);
        off=true;
    });
    $('#box1 input').eq(1).click(function(){
        
        $('#box1 p').eq(0).html(arrP[1]);
        off=false;
    });
    
    function funAuto(){
    
        $('#span').html((iNum+1)+'/'+arrImg.length);
        $('#word').html(arrTxT[iNum]);
        $('#img').attr('src',arrImg[iNum]);
    
    }
    funAuto();
    $('#prev').click(function(){
    
        iNum--;
        if(iNum==-1){
            if(off){
                iNum=arrImg.length-1;
            }else{
                alert('已经是第一个了，不能在点了');
                iNum=0;
            }
        }
        funAuto();
    });
    
    $('#next').click(function(){
    
        iNum++;
        if(iNum==arrImg.length){
            if(off){
                iNum=0;
            }else{
                alert('已经是最后一个了，不能在点了');
                iNum=arrImg.length-1;
            }
        }
        funAuto();
    });
})

</script>