jquery 图片浏览功能实现

效果展示：

HTML代码：

    <div id="no3">
        <img src="./img/last.png" id="last" onclick="JavaScript:showImg(-1)"/>
        <img src="./img/1.jpg" id="img01" onclick="JavaScript:showImg(2)"/>
        <img src="./img/2.jpg" id="img02" onclick="JavaScript:showImg(1)"/>
        <img src="./img/3.jpg" id="img03" onclick="JavaScript:showImg(0)"/>
        <img src="./img/4.jpg" id="img04" onclick="JavaScript:showImg(-1)"/>
        <img src="./img/5.jpg" id="img05" onclick="JavaScript:showImg(-2)"/>
        <img src="./img/next.png" id="next" onclick="JavaScript:showImg(1)"/>
    </div>

JS代码：

var imgArray =new Array();
imgArray[0]="./img/1.jpg";
imgArray[1]="./img/2.jpg";
imgArray[2]="./img/3.jpg";
imgArray[3]="./img/4.jpg";
imgArray[4]="./img/5.jpg";
imgArray[5]="./img/6.jpg";
imgArray[6]="./img/7.jpg";
imgArray[7]="./img/8.jpg";
imgArray[8]="./img/9.jpg";

//默认显示图片序号
var base=0;

//通过指定偏移量，来显示数组顺序中前或者后的第几张图片
function showImg(offset){
    base = (base-offset) % imgArray.length;
    
    for(var i=base;i<base+5;i++){
        var img=document.getElementById("img0"+(i-base+1));
        //判断图片是否从前往后循环显示
        if(i<0){
            img.src = imgArray[ imgArray.length +i ];
        }
        //判断图片是否从前往后循环显示
        else if(i>(imgArray.length-1)){
            img.src = imgArray[ i-imgArray.length ];
        }
        else{
            img.src= imgArray[i];
        }
    }
}

css代码：

#no3{
    width:50%;
    position: absolute;
    left:15%;
    top:5%;
}
#no3 img{    
     position:absolute;
     border:3px;
}
#last{
     left:-5px;
     top:85px;
     width:20px;
     height:20px;
}
#next{ 
     left:486px;
     top:85px;
     width:20px;
     height:20px;
}
#img01{
     z-index:4;
     left:31px;
     top:64px;
     width:74px;
     height:74px;
}
#img02{
    z-index:5;
    left:71px;
    top:32px;
    width:138px;
    height:138px;
}
#img03{
     z-index:6;
     left:151px;
     top:0px;
     width:198px;
     height:198px;
}
#img04{
    z-index:5;
    left:291px;
    top:32px;
    width:138px;
    height:138px;
}
#img05{
    z-index:4;
    left:395px;
    top:64px;
    width:74px;
    height:74px;
}