此实例是我一遍学习一边写出来的，希望能够帮到大家，一起学习。效果如图所示：
html代码如下所示：
复制代码 代码如下:
图片浏览工具制作
css代码如下：
    此处的mask1、2、3.....是覆盖几张照片的一个div，用opacity属性来定义透明度，可以实现一种朦胧感，让外观更加美丽。
复制代码 代码如下:
body {width: 1340px;height: 500px;background: url(../images/body_bg.gif) no-repeat;}
#pic_browser {width: 860px;height: 192px; position: relative;margin:130px 106px;}
#pic_browser img{position: absolute;border: none;}.prev {top:76px;left: 0px; }
#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index: 4;}
#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index: 5;}
#img3, .mask1 {width: 226px;height: 150px;left: 175px;top: 21px;z-index: 6;}
#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}
#img5, .mask5 {width: 226px;height: 150px;right: 175px;top: 21px;z-index: 6;}
#img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index: 5;}
#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index: 4;}
.next {top:76px;right: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background: #fff;position: absolute;}
.mask1, .mask5  {opacity: 0.3;}
.mask2, .mask6 {opacity: 0.5;}
.mask3, .mask7 {opacity: 0.7;}
js代码如下：
复制代码 代码如下:
window.onload = function()
{
   jzk.app.initimg();
}var imgarray = new array();
imgarray[0] = 'images/1.jpg';
imgarray[1] = 'images/2.jpg';
imgarray[2] = 'images/3.jpg';
imgarray[3] = 'images/4.jpg';
imgarray[4] = 'images/5.jpg';
imgarray[5] = 'images/6.jpg';
imgarray[6] = 'images/7.jpg';
var base=0;
var jzk = {}; /*定义命名空间*/
jzk.tools = {};/*分层第一层*/
jzk.ui = {};/*分层第二层*/
jzk.ui.moveimg = function(offset)
{
    base= (base-offset);
    for(var i = base;i    {
        var img = document.getelementbyid('img'+(i-base+1));/*保证img变量为img1、img2、img3...直到img7这7个img元素*/
        if(i0，*/
        {
            img.src =imgarray[imgarray.length+i];
        }
        else if(i>imgarray.length-1)
        {
            img.src =imgarray[i-imgarray.length];
        }
        else
        {
            img.src = imgarray[i];
        }
    }
}
jzk.app = {}; /*分层第三层*/
jzk.app.initimg = function()/*初始化显示图片,也就是调用函数moveimg过程：参数为7，base等于-7，i等于-7，-6，-5，-4，-3,-2,-1这7个值，对应的元素为img1，img2，...img7，所以有：img1=imgarray[-7+7],img2=imgarray[-6+7]....*/
{
     jzk.ui.moveimg(7);/*初始参数应该设为：能显示的张数(此处为7)；*/
}
三个文件，属js代码比较难理解，上面我也给出了详细的注释，如果还有谁看了不懂的，可以在下面评论中讨论。