3d旋转幻灯片分析与设计

3d旋转幻灯片分析与设计
需求：

如图：

有三种切换事件：定时自动切换、点击左右按钮切换和下方索引标签click切换。

图片切换时有3d旋转效果。

中间图片文字信息有淡出效果。

幻灯片默认自动3秒后向左旋转一次。

点击左边的按钮向左转，点击右边的按钮向右转。

分析：

结构布局：

图片div统一使用类ad-slide-div以及各自使用ad-slide-div加“序号”来命名id，且在图片div中使用隐藏的input来保存相应序号。使用ad-slide-div给出基本样式，即图片堆叠显示在中间，透明度为0。

图片文字信息统一使用类caption,放在图片div内，固定位置。

图片索引标签div使用类ad_slide_tag命名，各标签使用ad-slide-tag-加”序号”来命名id.标签内使用隐藏input保存相应序号。

图片左右切换按钮使用类ad_slide_button命名其div，各自使用left及right来命名id.且设置对应样式。

图片的旋转效果主要有以下两种情况以及各个过程组成：

左转：

中间显示的图片滚动到左边

右边显示的图片滚动到中间

后面隐藏的图片放到右边

左边的图片隐藏到后面

指定图片文字信息浮现

设置下方索引

右转：

中间显示的图片滚动到右边

左边显示的图片滚动到中间

后面隐藏的图片放到左边

右边的图片隐藏到后面

指定图片文字信息浮现

设置下方索引

但实际上可以归结为：

图片隐藏到后面

设置左边的图片

设置中间的图片

设置文字信息

设置右边的图片

设置下方索引标签

从而之需要获取相对应的三张图片序号即可。序号只可能是当前要显示的图片的前一张、当前图片以及当前图片的后一张。而这里需要考虑当前图片为0和当前图片为最后一张的情况。

把以上的动作写成一个基本方法，这个方法需要如下参数：

num：要显示的序号

direction：旋转方向

time：完成动画使用的时间，由此可以迅速越过几张图片切换到指定图片

通过基本方法即可以完成幻灯片的三个事件操作。

其中下方的索引标签切换时需要考虑多次旋转以及最优旋转的情况。

最优旋转主要是考虑头部和尾部的互相切换。其他的使用默认的向右切换。多次旋转则可以根据从当前图片过度到指定图片需要旋转多少次，然后使用循环来调用基本方法。这里要求给当前显示在中间的图片加上可辨认的标识，这里使用加类ad-slide-div-middle的方法。

代码设计：

css:

[css]
/****幻灯片****/
.home_span_nav_ad_slide{
    width: 940px;
    height:350px;
    float:left;
    position: relative;
}
.ad-slide-div{
    width:300px;
    height:160px;
    position: absolute;
    top: 100px;
    left: 320px;
    z-index: 2;
}
.ad-slide-div img{
    width:100%;
    height:100%;
}
.caption{
    position: absolute;
    left: 0px;
    z-index: 6;
    margin-bottom:5px;
    height:50px;
    background:#000;
    background:rgba(0,0,0,.7);
    width:620px;
    font-size:12px;
    color:#fff;
    border-top:1px solid #000;
    text-shadow:none;
    padding:0 10px 020px;
}
.caption_title{
    height:20px;
    width:620px;
    line-height:20px;
}
.caption_title a{
    color:#fff;
    text-decoration:none;
    line-height:20px;
    font-weight:bold;
}
.caption_content{
    height:20px;
    width:620px;
    line-height:20px;
    font-size:12px;
    overflow: hidden;
}
.caption_content a{
    color:#fff;
    text-decoration:none;
    line-height:20px;
}
.prev{
    width:145px;
    height:230px;
    position: absolute;
    left: 0px;
    z-index: 3;
    top:85px;
    cursor: pointer;
}
.next{
    width:145px;
    height:230px;
    position: absolute;
    right: 0px;
    z-index: 3;
    top:85px;
    cursor: pointer;
}
.home_span_nav_ad_slide_bottom{
    margin:30px 00 0;
    float:left;
    height:34px;
    width:100%;
    background:url(../images/home/slide_bg.gif);
}
.home_span_nav_ad_slide_bottom ul{
    width:200px;
    height:40px;
    margin:0 auto;
    padding:0;
    line-height:34px;
    list-style:none;
}
.home_span_nav_ad_slide_bottom ul li{
    line-height:34px;
    float:left;
    width:26px;
    height:28px;
    margin:4px 2px 00;
    cursor: pointer;
}
.ad-slide-div-switch{
    background:url(../images/home/focus_out.gif);
}
.ad-slide-div-switch-on{
    background:url(../images/home/focus_on.gif);
}
[css]
/****幻灯片****/
.home_span_nav_ad_slide{
    width: 940px;
    height:350px;
    float:left;
    position: relative;
}
.ad-slide-div{
    width:300px;
    height:160px;
    position: absolute;
    top: 100px;
    left: 320px;
    z-index: 2;
}
.ad-slide-div img{
    width:100%;
    height:100%;
}
.caption{
    position: absolute;
    left: 0px;
    z-index: 6;
    margin-bottom:5px;
    height:50px;
    back

补充：软件开发 , C# ,