自己设计了一个wipebox 幻灯片

标签：

/**
* 简单幻灯片
* 作者:kurosaki
**/
var swipebox = {
<span style="white-space:pre">	</span>box:null,
<span style="white-space:pre">	</span>nowpage:1,<span style="white-space:pre">	</span>// 0 左 1  中  2 右
<span style="white-space:pre">	</span>nowindex:0,<span style="white-space:pre">	</span>//当前显示的数据下标
<span style="white-space:pre">	</span>elementArr:null,//所绑定事件的数组
<span style="white-space:pre">	</span>_dataArr:null,//数据 数组
<span style="white-space:pre">	</span>open:function(){
<span style="white-space:pre">		</span>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>");
<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span>*单击后隐藏上下边框,若被阻止冒泡,将不被执行
<span style="white-space:pre">		</span>**/
<span style="white-space:pre">		</span>box.find("#box-content").click(function(){
<span style="white-space:pre">			</span>$("#box-top").slideToggle("slow");
<span style="white-space:pre">			</span>$("#box-bottom").slideToggle("slow");
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span>*阻止事件冒泡,用于阻止单击元素时触发到透明背景
<span style="white-space:pre">		</span>**/
<span style="white-space:pre">		</span>box.find(".box-stoppop").click(function(e){
<span style="white-space:pre">			</span>e.stopPropagation();
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>box.find("#box-btn-exit").click(function(e){
<span style="white-space:pre">			</span>$("#box2016-panel").fadeOut("slow",function(){
<span style="white-space:pre">				</span>$("#box2016-panel").remove();
<span style="white-space:pre">				</span>$("body").eq(0).css("overflow","auto");
<span style="white-space:pre">				</span>$("body").data("boxvar").nowpage=1;
<span style="white-space:pre">			</span>});
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span>绑定上下页按钮事件
<span style="white-space:pre">		</span>prev 显示上一个
<span style="white-space:pre">		</span>next 显示下一个
<span style="white-space:pre">		</span>**/
<span style="white-space:pre">		</span>box.find("#box-btn-prev").click(function(){
<span style="white-space:pre">			</span>var temp = $("body").data("boxvar");
<span style="white-space:pre">			</span>var nowpage = temp.nowpage;
<span style="white-space:pre">			</span>var idarr = [["#box-nextcontent","#box-prevcontent","#box-centercontent"],["#box-prevcontent","#box-centercontent","#box-nextcontent"],["#box-centercontent","#box-nextcontent","#box-prevcontent"]];
<span style="white-space:pre">			</span>if(nowpage>0){
<span style="white-space:pre">				</span>temp.nowpage--;
<span style="white-space:pre">				</span>nowpage--;
<span style="white-space:pre">			</span>}else{
<span style="white-space:pre">				</span>temp.nowpage=2;
<span style="white-space:pre">				</span>nowpage=2;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>
<span style="white-space:pre">			</span>$(idarr[nowpage][0]).css({left:"-105%"});
<span style="white-space:pre">			</span>var nowpanel = $(idarr[nowpage][1]);
<span style="white-space:pre">			</span>nowpanel.animate({left:"10%"});
<span style="white-space:pre">			</span>$(idarr[nowpage][2]).animate({left:"105%"});
<span style="white-space:pre">			</span>//添加数据到当前页
<span style="white-space:pre">			</span>if(--temp.nowindex<0){
<span style="white-space:pre">				</span>temp.nowindex = temp.getData().length-1;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>nowpanel.html(temp.getData()[temp.nowindex]);
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>//下一页
<span style="white-space:pre">		</span>box.find("#box-btn-next").click(function(){
<span style="white-space:pre">			</span>var temp = $("body").data("boxvar");
<span style="white-space:pre">			</span>var nowpage = temp.nowpage;
<span style="white-space:pre">			</span>var idarr = [["#box-nextcontent","#box-prevcontent","#box-centercontent"],["#box-prevcontent","#box-centercontent","#box-nextcontent"],["#box-centercontent","#box-nextcontent","#box-prevcontent"]];
<span style="white-space:pre">			</span>if(nowpage<2){
<span style="white-space:pre">				</span>temp.nowpage++;
<span style="white-space:pre">				</span>nowpage++;
<span style="white-space:pre">			</span>}else{
<span style="white-space:pre">				</span>temp.nowpage=0;
<span style="white-space:pre">				</span>nowpage=0;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>$(idarr[nowpage][0]).animate({left:"-105%"});
<span style="white-space:pre">			</span>var nowpanel = $(idarr[nowpage][1]);
<span style="white-space:pre">			</span>nowpanel.animate({left:"10%"});
<span style="white-space:pre">			</span>$(idarr[nowpage][2]).css({left:"105%"});
<span style="white-space:pre">			</span>//添加数据到当前页
<span style="white-space:pre">			</span>if(++temp.nowindex>temp.getData().length-1){
<span style="white-space:pre">				</span>temp.nowindex = 0;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>nowpanel.html(temp.getData()[temp.nowindex]);
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>var elem = $(".swipebox");//查找使用此类的元素并为其绑定事件用于显示幻灯片
<span style="white-space:pre">		</span>this.elementArr = elem;
<span style="white-space:pre">		</span>$("body").data("boxvar",this);//将此对象存在BODY标签中
<span style="white-space:pre">		</span>elem.click(function(){
<span style="white-space:pre">			</span>var temp = $("body").data("boxvar");
<span style="white-space:pre">			</span>temp.nowindex = temp.elementArr.index($(this));<span style="white-space:pre">		</span>//得到当前点击对象序号
<span style="white-space:pre">			</span>var idarr = ["#box-prevcontent","#box-centercontent","#box-nextcontent"];
<span style="white-space:pre">			</span>temp.show();
<span style="white-space:pre">			</span>$(idarr[temp.nowpage]).html(temp.getData()[temp.nowindex]); //依据序号 将存储在elementData中的第(序号)个元素加载到当前面板
<span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span>click事件调用此方法用于显示
<span style="white-space:pre">	</span>**/
<span style="white-space:pre">	</span>show:function(){
<span style="white-space:pre">		</span>var temp = box.clone(true);
<span style="white-space:pre">		</span>$("body").append(temp);
<span style="white-space:pre">		</span>$("body").eq(0).css("overflow","hidden");//隐藏窗口滚动条
<span style="white-space:pre">		</span>temp.fadeIn("slow");
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span>添加Next处理事件
<span style="white-space:pre">	</span>**/
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>setData:function(arr){
<span style="white-space:pre">		</span>if(arr instanceof Array)this._dataArr = arr;
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>getData:function(){
<span style="white-space:pre">		</span>return this._dataArr;
<span style="white-space:pre">	</span>}
};

然后是 CSS文件 myswipebox.css

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


#box2016-panel{
    position:fixed;
    height: 100%;
    width: 100%;
<span style="white-space:pre">	</span>top:0px;
<span style="white-space:pre">	</span>left:0px;
<span style="white-space:pre">	</span>display:none;
}
#box-alpha{
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>height:100%;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>background-color:#000;
<span style="white-space:pre">	</span>filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
<span style="white-space:pre">	</span>opacity:0.5;
}
#box-content{
<span style="white-space:pre">	</span>position:relative;
<span style="white-space:pre">	</span>height:100%;
<span style="white-space:pre">	</span>width:100%;
}
#box2016-panel div.box-body{
<span style="white-space:pre">	</span>top:10%;
<span style="white-space:pre">	</span>height:75%;
<span style="white-space:pre">	</span>min-height:300px;
<span style="white-space:pre">	</span>width:80%;
<span style="white-space:pre">	</span>min-width:500px;
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>z-index:99;
<span style="white-space:pre">	</span>background-color:#fff;
<span style="white-space:pre">	</span>-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;
<span style="white-space:pre">	</span>padding:10px;
}
#box2016-panel div.box-body img{
<span style="white-space:pre">	</span>max-width:80%;
<span style="white-space:pre">	</span>max-height:300px;
<span style="white-space:pre">	</span>overflow:auto;
}
#box2016-panel div #box-top,#box-bottom{
<span style="white-space:pre">	</span>height:50px;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>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;
<span style="white-space:pre">	</span>vertical-align:middle;
<span style="white-space:pre">	</span>line-height:50px;
}
#box2016-panel div#box-top{
<span style="white-space:pre">	</span>top:0px;
}
#box2016-panel div#box-bottom{
<span style="white-space:pre">	</span>bottom:0px;
}
#box2016-panel #box-btn-prev,#box-btn-next{
<span style="white-space:pre">	</span>font-size:120px;
<span style="white-space:pre">	</span>font-weight:bold;
<span style="white-space:pre">	</span>font-family:'Cooper Black','Arial Black';
<span style="white-space:pre">	</span>z-index:30;
<span style="white-space:pre">	</span>color:#fff;
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>display:block;
<span style="white-space:pre">	</span>cursor:pointer;
<span style="white-space:pre">	</span>text-shadow:3px 3px 4px #000000;
}
#box2016-panel #box-btn-exit{
<span style="white-space:pre">	</span>display:block;
<span style="white-space:pre">	</span>float:right;
<span style="white-space:pre">	</span>font-size:45px;
<span style="white-space:pre">	</span>font-weight:bold;
<span style="white-space:pre">	</span>font-family:'Arial Black';
<span style="white-space:pre">	</span>color:#fff;
<span style="white-space:pre">	</span>text-decoration:none;
<span style="white-space:pre">	</span>margin-right:25px;
}
#box2016-panel .box-btn:hover{
<span style="white-space:pre">	</span>color:#DFDFDF;
}
#box2016-panel #box-btn-prev{
<span style="white-space:pre">	</span>left:1%;
<span style="white-space:pre">	</span>top:40%;
}
#box2016-panel #box-btn-next{
<span style="white-space:pre">	</span>right:1%;
<span style="white-space:pre">	</span>top:40%;
}
#box2016-panel #box-centercontent{
<span style="white-space:pre">	</span>left:10%;
}
#box2016-panel #box-prevcontent{
<span style="white-space:pre">	</span>left:-105%;
}
#box2016-panel #box-nextcontent{
<span style="white-space:pre">	</span>left:105%;
}

示例:

<!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>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
	swipebox.open();
	swipebox.setData(["测试内容1","测试内容2"]);
});
</script>
<input class="swipebox" type="button" value="按1钮"/>
<input class="swipebox" type="button" value="按2钮"/>
</body>
</html>

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() 你懂的,原理很简单 就不多说

所以 内容框自己设计 限制大小,设置大小样式等再传进去显示

自己设计了一个wipebox 幻灯片

标签：

原文地址：http://blog.csdn.net/wang845252276/article/details/51221607