3d旋转幻灯片分析与设计
来源：互联网 发布：centos7安装内核源码 编辑：程序博客网 时间：2024/04/28 03:59
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:
- /****幻灯片****/
- .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);
- }
html+js:
- <div class="home_span_nav_top">
- <div class="home_span_nav_ad">
- <div class="home_span_nav_ad_slide">
- <div class="ad-slide-div" id="ad-slide-div-0">
- <input type="hidden" value="0"/>
- <a href="" title="" rel=""><img src="images/ppt1.png" width="650" height="350" id="img-0"/></a>
- <div class="caption" id="caption-0" style="bottom:0">
- <div class="caption_title"><a href="###">细胞培养耗材0</a></div>
- <div class="caption_content"><a href="###">天然氨基酸合成，快速高效！</a></div>
- </div>
- </div>
- <div class="ad-slide-div" id="ad-slide-div-1">
- <input type="hidden" value="1"/>
- <a href="" title="" rel=""><img src="images/ppt2.png" width="650" height="350" id="img-1"/></a>
- <div class="caption" id="caption-1" style="bottom:0">
- <div class="caption_title"><a href="###">细胞培养耗材1</a></div>
- <div class="caption_content"><a href="###">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</a></div>
- </div>
- </div>
- <div class="ad-slide-div" id="ad-slide-div-2">
- <input type="hidden" value="2"/>
- <a href="" title="" rel=""><img src="images/ppt3.png" width="650" height="350" id="img-2"/></a>
- <div class="caption" id="caption-2" style="bottom:0">
- <div class="caption_title"><a href="###">细胞培养耗材2</a></div>
- <div class="caption_content"><a href="###">然氨基酸合成，快速高效！</a></div>
- </div>
- </div>
- <div class="ad-slide-div" id="ad-slide-div-3">
- <input type="hidden" value="3"/>
- <a href="" title="" rel=""><img src="images/ppt4.png" width="650" height="350" id="img-3"/></a>
- <div class="caption" id="caption-3" style="bottom:0">
- <div class="caption_title"><a href="###">细胞培养耗材3</a></div>
- <div class="caption_content"><a href="###">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</a></div>
- </div>
- </div>
- <div class="ad-slide-div" id="ad-slide-div-4">
- <input type="hidden" value="4"/>
- <a href="" title="" rel=""><img src="images/ppt5.png" width="650" height="350" id="img-4"/></a>
- <div class="caption" id="caption-4" style="bottom:0">
- <div class="caption_title"><a href="###">细胞培养耗材4</a></div>
- <div class="caption_content">天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！天然氨基酸合成，快速高效！</div>
- </div>
- </div>
- <div class="prev change-button"><img src="images/bg/left.png" alt="Arrow Next" title="下一张"/><input type="hidden" value="left"/></div>
- <div class="next change-button"><img src="images/bg/right.png" alt="Arrow Prev" title="上一张"/><input type="hidden" value="right"/></div>
- </div>
- <div class="home_span_nav_ad_slide_bottom">
- <ul>
- <li class="ad-slide-div-switch" id="ad-slide-div-switch-0"><input type="hidden" value="0"/></li>
- <li class="ad-slide-div-switch" id="ad-slide-div-switch-1"><input type="hidden" value="1"/></li>
- <li class="ad-slide-div-switch" id="ad-slide-div-switch-2"><input type="hidden" value="2"/></li>
- <li class="ad-slide-div-switch" id="ad-slide-div-switch-3"><input type="hidden" value="3"/></li>
- <li class="ad-slide-div-switch" id="ad-slide-div-switch-4"><input type="hidden" value="4"/></li>
- </ul>
- </div>
- <script type="text/javascript">
- /**
- *幻灯片控制代码开始
- */
- var Interval_control = '';//自动切换控制变量
- var show_num;//要显示的图片序号
- var total = 5;//图片总数
- var start_time = 500;//初始化动画时间
- //初始化设置
- $('.ad-slide-div').css('opacity',0);
- $('.caption').hide();
- $('#ad-slide-div-switch-1').addClass("ad-slide-div-switch-on");
- //设置左边的图片
- $('#ad-slide-div-0').css({"z-index":0})
- .animate({opacity:1,top:"85px",left:"0px",width:"430px",height:"230px"},start_time);
- //设置中间的图片
- $('#ad-slide-div-1').addClass("ad-slide-div-middle").css('z-index',2)
- .animate({opacity:1,top:"0px",left:"145px",width:"650px",height:"350px"},start_time);
- $('#caption-1').fadeIn(start_time);
- //设置右边的图片
- $('#ad-slide-div-2').css({"z-index":1})
- .animate({opacity:1,top:"85px",left:"510px",width:"430px",height:"230px"},start_time);
- Interval_control= setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
- //如果是谷歌浏览器的话添加隐藏标签和显示标签事件
- if (window.navigator.userAgent.indexOf("Chrome")>=0) {
- window.addEventListener('focus', function() {
- Interval_control= setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
- },false);
- window.addEventListener('blur', function() {
- window.clearInterval(Interval_control);
- },false);
- }
- /*切换方法
- *num:要显示的图片
- *direction:旋转方向
- *time:动画效果时间
- */
- function newsSlide_ChangeImg(num,direction,time)
- {
- if(num < 0)
- {
- num = (parseInt($('.ad-slide-div-middle').find("input").val())+1)%total;//获取要显示的序号
- }
- //隐藏所有
- $('.ad-slide-div').removeClass('ad-slide-div-middle');
- var left_obj;
- var middle_obj;
- var middle_caption_obj;
- var right_obj;
- var hide_obj;
- //左边的图片
- if(num==0){
- left_obj = $('#ad-slide-div-'+(total-1));
- }else{
- left_obj = $('#ad-slide-div-'+(num-1));
- }
- //中间的图片
- middle_obj = $('#ad-slide-div-'+num);
- middle_caption_obj = $('#caption-'+num);
- //右边的图片
- if(num==total-1){
- right_obj = $('#ad-slide-div-0');
- }else{
- right_obj = $('#ad-slide-div-'+(num+1));
- }
- //隐藏的图片,需要区分左右
- if(direction=='left')
- {
- if(num==0)
- {
- hide_obj = $('#ad-slide-div-'+(total-2));
- }else if(num==1){
- hide_obj = $('#ad-slide-div-'+(total-1));
- }else{
- hide_obj = $('#ad-slide-div-'+(num-2));
- }
- }else{
- if(num==total-2)
- {
- hide_obj = $('#ad-slide-div-0');
- }else if(num==total-1){
- hide_obj = $('#ad-slide-div-1');
- }else{
- hide_obj = $('#ad-slide-div-'+(num+2));
- }
- }
- //隐藏的图片放到后面
- hide_obj.css({"z-index":0})
- .animate({opacity:0,top:"100px",left:"320px",width:"300px",height:"160px"});
- //设置右边的图片
- right_obj.css({"z-index":1,"overflow":"hidden"})
- .animate({opacity:1,top:"85px",left:"510px",width:"430px",height:"230px"});
- //设置中间的图片
- middle_obj.css('z-index',2).addClass("ad-slide-div-middle")
- .animate({top:"0px",left:"145px",width:"650px",height:"350px"},time);
- //指定图片文字信息浮现
- $('.caption').fadeOut();
- middle_caption_obj.fadeIn(time);
- //设置左边的图片
- left_obj.css({"z-index":1,"overflow":"hidden"})
- .animate({opacity:1,top:"85px",left:"0px",width:"430px",height:"230px"});
- //设置下方索引
- $('.ad-slide-div-switch').removeClass("ad-slide-div-switch-on");
- $('#ad-slide-div-switch-'+num).addClass("ad-slide-div-switch-on");
- }
- //当触发mouseenter事件时，取消正在执行的自动切换方法并调用手动切换方法切换到指定序号，触发mouseouter事件时重新设置自动切换
- $('.home_span_nav_ad_slide').mouseenter(function(){
- clearInterval(Interval_control);//停止自动切换
- }).mouseleave(function(){
- Interval_control= setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
- });
- //左右切换click事件，取消正在执行的自动切换方法并调用手动切换方法切换到指定序号，3秒后重新设置自动切换
- $('.home_span_nav_ad_slide .change-button').click(function(){
- type = $(this).find("input").val();//获取方向类型
- if(type=='right')
- {
- show_num = parseInt($('.ad-slide-div-middle').find("input").val());//获取当前序号
- show_num = show_num==0?total-1:show_num-1;//如果当前显示的为0则下一张显示最后一张图片,否者为前一张图片
- }else{
- show_num = (parseInt($('.ad-slide-div-middle').find("input").val())+1)%total;//获取当前序号
- }
- newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
- });
- //指定切换
- //考虑最优切换和多次切换
- $('.home_span_nav_ad_slide_bottom li').click(function(){
- show_num = parseInt($(this).find("input").val());//获取要显示的序号
- now_num = parseInt($('.ad-slide-div-middle').find("input").val());//当前显示的序号
- clearInterval(Interval_control);//停止自动切换
- //确定旋转方向和旋转次数:除了顶端切换到末端以及要显示的在当前显示图片左边之外，其他都向左旋转
- var type = 'left';
- var change_num = show_num-now_num;//旋转次数
- if(show_num==total-1 && now_num==0)
- {
- type = 'right';
- change_num = 1;
- }else if(now_num==total-1 && show_num==0){
- change_num = 1;
- }else if(show_num<now_num){
- type = 'right';
- change_num = now_num-show_num;
- }
- //一次旋转
- if(change_num==1)
- {
- newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
- }else{
- //多次旋转,根据方向和次数调用基本方法实现
- for(var star = 1;star<=change_num;star++)
- {
- if(type=='right')
- {
- show_num = now_num-star;
- }else{
- show_num = now_num+star;
- }
- newsSlide_ChangeImg(show_num,type,100);//切换到指定序号
- }
- }
- Interval_control= setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//设置自动切换函数
- })
- /**
- *幻灯片控制代码结束
- */
- </script>
- </div>
- <div class="clear"></div>
- </div>
- 3d旋转幻灯片分析与设计
- jQuery炫酷3D旋转幻灯片特效插件
- 3D幻灯片
- jquery 幻灯片插件 canvas 3D旋转木马 图片立体展示 图片有大到小一次顺序排列
- 【示例代码】3D旋转图片立体展示jquery幻灯片插件（附源码）
- 分析与设计（A&D）简介（3）
- CSS3动画图片旋转与3d硬件加速
- OOA/D：面向对象分析与设计
- css transform 3D幻灯片特效
- html5 3d宽屏幻灯片代码
- 3D数学与游戏：四元数与旋转
- 3D旋转菜单
- 关于3d旋转
- 3D 旋转立方体
- 3D旋转UIView
- 3D旋转
- css 3d旋转
- 3D相册旋转
- [VS2010].NET4.0环境下使用.NET2.0程序集，出现“混合模式程序集异常”
- jxl简介，jxl操作excel 创建，读取，修改。
- JAVA学习笔记（2）基本数据类型和基本操作
- fs.FSInputChecker: Found checksum error
- public、protected和private访问权限以及继承问题
- 3d旋转幻灯片分析与设计
- GPIO驱动程序的移植
- JNDI教程
- android中用Spannable在TextView中设置超链接、颜色、字体
- 随笔三十：特殊的算术操作
- matlab Permute Rearrange dimensions of N-D array
- 冒泡排序-JAVA
- EL表达式（自己学习备用）
- PHP基础语法
