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;
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:
[html]
<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);//切換到指定序號
} www.2cto.com
}
Interval_control= setInterval(function(){newsSlide_ChangeImg(-1,'left',start_time);},3000);//設置自動切換函數
})
/**
*幻燈片控制代碼結束
*/
</script>
</div>
<div class="clear"></div>
</div>
作者：guyongqing52
