自己设计了一个wipebox 幻灯片

/**
* 简单幻灯片
* 作者:kurosaki
**/
var swipebox = {
    box:null,
    nowpage:1,  // 0 左 1  中  2 右
    nowindex:0, //当前显示的数据下标
    elementArr:null,//所绑定事件jquery对象的数组
    _dataArr:null,//数据 数组
    open:function(){
        box = $("<div id='box2016-panel'><div id='box-alpha'></div><div id='box-content'><span id='box-btn-prev' class='box-btn box-stoppop'>&lt;</span><span id='box-btn-next' class='box-btn box-stoppop'>&gt;</span>\
        <div id='box-top'></div>\
        <div class='box-body box-stoppop' id='box-centercontent'>中</div>\
        <div class='box-body box-stoppop' id='box-prevcontent'>左</div>\
        <div class='box-body box-stoppop' id='box-nextcontent'>右</div>\
        <div id='box-bottom'><a id='box-btn-exit' href='javascript:;' class=' box-btn box-stoppop'>×</a></div></div></div>");
        /**
        *单击后隐藏上下边框,若被阻止冒泡,将不被执行
        **/
        box.find("#box-content").click(function(){
            $("#box-top").slideToggle("slow");
            $("#box-bottom").slideToggle("slow");
        });
        /**
        *阻止事件冒泡,用于阻止单击元素时触发到透明背景
        **/
        box.find(".box-stoppop").click(function(e){
            e.stopPropagation();
        });
        box.find("#box-btn-exit").click(function(e){
            $("#box2016-panel").fadeOut("slow",function(){
                $("#box2016-panel").remove();
                $("body").eq(0).css("overflow","auto");
                $("body").data("boxvar").nowpage=1;
            });
        });
        /**
        绑定上下页按钮事件
        prev 显示上一个
        next 显示下一个
        **/
        box.find("#box-btn-prev").click(function(){
            var temp = $("body").data("boxvar");
            var nowpage = temp.nowpage;
            var idarr = [["#box-nextcontent","#box-prevcontent","#box-centercontent"],["#box-prevcontent","#box-centercontent","#box-nextcontent"],["#box-centercontent","#box-nextcontent","#box-prevcontent"]];
            if(nowpage>0){
                temp.nowpage--;
                nowpage--;
            }else{
                temp.nowpage=2;
                nowpage=2;
            }

            $(idarr[nowpage][0]).css({left:"-105%"});
            var nowpanel = $(idarr[nowpage][1]);
            nowpanel.animate({left:"10%"});
            $(idarr[nowpage][2]).animate({left:"105%"});
            //添加数据到当前页
            if(--temp.nowindex<0){
                temp.nowindex = temp.getData().length-1;
            }
            nowpanel.html(temp.getData()[temp.nowindex]);
        });
        //下一页
        box.find("#box-btn-next").click(function(){
            var temp = $("body").data("boxvar");
            var nowpage = temp.nowpage;
            var idarr = [["#box-nextcontent","#box-prevcontent","#box-centercontent"],["#box-prevcontent","#box-centercontent","#box-nextcontent"],["#box-centercontent","#box-nextcontent","#box-prevcontent"]];
            if(nowpage<2){
                temp.nowpage++;
                nowpage++;
            }else{
                temp.nowpage=0;
                nowpage=0;
            }
            $(idarr[nowpage][0]).animate({left:"-105%"});
            var nowpanel = $(idarr[nowpage][1]);
            nowpanel.animate({left:"10%"});
            $(idarr[nowpage][2]).css({left:"105%"});
            //添加数据到当前页
            if(++temp.nowindex>temp.getData().length-1){
                temp.nowindex = 0;
            }
            nowpanel.html(temp.getData()[temp.nowindex]);
        });
        var elem = $(".swipebox");//查找使用此类的元素并为其绑定事件用于显示幻灯片
        this.elementArr = elem;
        $("body").data("boxvar",this);//将此对象存在BODY标签中
        elem.click(function(){
            var temp = $("body").data("boxvar");
            temp.nowindex = temp.elementArr.index($(this));        //得到当前点击对象序号
            var idarr = ["#box-prevcontent","#box-centercontent","#box-nextcontent"];
            temp.show();
            $(this).blur();//加上这句 防止显示后按回车和空格再显示一个
            $(idarr[temp.nowpage]).html(temp.getData()[temp.nowindex]); //依据序号 将存储在elementData中的第(序号)个元素加载到当前面板
        });
    },
    /**
    click事件调用此方法用于显示
    **/
    show:function(){
        var temp = box.clone(true);
        $("body").append(temp);
        $("body").eq(0).css("overflow","hidden");//隐藏窗口滚动条
        temp.fadeIn("slow");
    },
    /**
    添加Next处理事件
    **/

    setData:function(arr){
        if(arr instanceof Array)this._dataArr = arr;
    },
    getData:function(){
        return this._dataArr;
    }
};

上述代码 保存为 myswipebox.js

---

然后是 CSS文件 myswipebox.css

@charset "utf-8";
/* CSS Document */

#box2016-panel{
    position:fixed;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    display:none;
}
#box-alpha{
    position:absolute;
    height:100%;
    width:100%;
    background-color:#000;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity:0.5;
}
#box-content{
    position:relative;
    height:100%;
    width:100%;
}
#box2016-panel div.box-body{
    top:10%;
    height:75%;
    min-height:300px;
    width:80%;
    min-width:500px;
    position:absolute;
    z-index:99;
    background-color:#fff;
    -webkit-box-shadow: 0 1px 1px 1px #ccc, inset 0 1px 1px 1px white;
    -moz-box-shadow: 0 1px 1px 1px #ccc, inset 0 1px 1px 1px white;
    box-shadow: 0 1px 1px 1px #ccc, inset 0 1px 1px 1px white;
    padding:10px;
}
#box2016-panel div.box-body img{
    max-width:80%;
    max-height:300px;
    overflow:auto;
}
#box2016-panel div #box-top,#box-bottom{
    height:50px;
    width:100%;
    position:absolute;
    background-color: #0d0d0d;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #000000));
    background-image: -webkit-linear-gradient(#0d0d0d, #000000);
    background-image: -moz-linear-gradient(#0d0d0d, #000000);
    background-image: -o-linear-gradient(#0d0d0d, #000000);
    background-image: linear-gradient(#0d0d0d, #000000);
    -webkit-box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
    -moz-box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
    box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
    opacity: 0.95;
    vertical-align:middle;
    line-height:50px;
}
#box2016-panel div#box-top{
    top:0px;
}
#box2016-panel div#box-bottom{
    bottom:0px;
}
#box2016-panel #box-btn-prev,#box-btn-next{
    font-size:120px;
    font-weight:bold;
    font-family:'Cooper Black','Arial Black';
    z-index:30;
    color:#fff;
    position:absolute;
    display:block;
    cursor:pointer;
    text-shadow:3px 3px 4px #000000;
}
#box2016-panel #box-btn-exit{
    display:block;
    float:right;
    font-size:45px;
    font-weight:bold;
    font-family:'Arial Black';
    color:#fff;
    text-decoration:none;
    margin-right:25px;
}
#box2016-panel .box-btn:hover{
    color:#DFDFDF;
}
#box2016-panel #box-btn-prev{
    left:1%;
    top:40%;
}
#box2016-panel #box-btn-next{
    right:1%;
    top:40%;
}
#box2016-panel #box-centercontent{
    left:10%;
}
#box2016-panel #box-prevcontent{
    left:-105%;
}
#box2016-panel #box-nextcontent{
    left:105%;
}

---

然后jquery库 我用的1.7.2 版本 高低都无所谓

---

测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script language="javascript" src="myswipebox.js"></script>
<link href="myswipebox.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
body{
    background-color: #92F552;
    margin:0px;
    padding:0px;
    list-style:none;
    border-style:none;
}
div,ul,li{
    border-style:none;
}
input{
    height:40px;
    width:200px;
    font-size:30px;
}

</style>
</head>

<body>
<div id="test" style="width:200px;height:200px;background-color:red;"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    swipebox.open();
    swipebox.setData(["<img src='test.gif'/>",$("#test")]);
});
</script>
<input class="swipebox" type="button" value="按1钮"/>
<input class="swipebox" type="button" value="按2钮"/>
</body>
</html>

---

引用 mywipebox.js时会创建一个swipebox的对象
open方法会初始化界面,并给相应的按钮绑定事件
而需要弹出此box的元素 需添加类
class=”swipebox”
即可.要显示的数据用 swipebox.setData(参数)
此参数为一维数组内容什么都可以例如GIF

swipebox.setData(["<img src='test.gif'/>","<img src='psb.jpg'/>"]);

这个传进去的内容最好自己设置过样式.
也可以是

<div id="test" style="width:200px;height:200px;background-color:red;"></div>
swipebox.setData(["<img src='test.gif'/>",$("#test")]);

对象内部设置的是html() 你懂的,原理很简单 就不多说
所以 内容框自己设计 限制大小,设置大小样式做好后,再传进去显示
便会依据数组大小轮番显示
由于过于简单,还可以自己更改样式 比如隐藏左右按钮 等