5
更新：效果正常。 剩下的最後一件事是試圖滑過槽，因爲我似乎無法將figure out。如何使用jQuery實現這種Flash效果？
更新：我已經成功與transitions plugin做到這一點。還有一個問題：當文本在框中滑動時，我可以看到它是如何從外部進入框中的。 Click here看看我的意思。
我想使用jQuery實現this flash effect（上 - >閃光燈，底部 - > jQuery的），所以這將是在iPhone和智能手機查看。
目前，我無法從文本框下面滑入文本。
HTML代碼：
<div id="banner">
<div>
<img src="img/banner-1.jpg" class="banner-bg" />
<div class="left"></div>
<div class="left-text"><span>POLISHED FLOORS1</span></div>
<div class="right"></div>
<div class="right-text"><span>Custom-made, elegant and long lasting.</span></div>
</div>
<div>
<img src="img/banner-2.jpg" class="banner-bg" />
<div class="left"></div>
<div class="left-text"><span>POLISHED FLOORS2</span></div>
<div class="right"></div>
<div class="right-text"><span>Custom-made, elegant and long lasting.</span></div>
</div>
<div>
<img src="img/banner-3.jpg" class="banner-bg" />
<div class="left"></div>
<div class="left-text"><span>POLISHED FLOORS3</span></div>
<div class="right"></div>
<div class="right-text"><span>Custom-made, elegant and long lasting.</span></div>
</div>
</div>
jQuery代碼：
$(document).ready(function(){
//$("#banner .left").transition({opacity: "1", width: "238px"}, 1200);
//$("#banner .right").transition({opacity: "0.7", width: "662px"}, 1200);
//$("#banner .left-text").delay(1200).transition({ opacity: '1', x: '-220px' });
//$("#banner .right-text").delay(1200).transition({ opacity: '1', x: '+642px' });
$(function(){
$ds = $('#banner div .banner-bg');
$ds.hide().eq(0).show();
setInterval(function(){
$ds.filter(':visible').fadeOut(function(){
var $banner_bg = $(this).next('div .banner-bg');
var $left = $(this).next('div .left');
var $right = $(this).next('div .right');
var $left_text = $(this).next('div .left-text');
var $right_text = $(this).next('div .right-text');
if ($banner_bg.length == 0) {
$ds.eq(0).fadeIn();
} else {
$left.transition({opacity: "1", width: "238px"}, 1200);
$right.transition({opacity: "0.7", width: "662px"}, 1200);
$left_text.delay(1200).transition({ opacity: '1', x: '-220px' });
$right_text.delay(1200).transition({ opacity: '1', x: '+642px' });
$banner_bg.fadeIn();
}
});
}, 5000);
});
});
CSS代碼：
#banner {
height:299px;
width:900px;
position:relative;
overflow:hidden;
}
#banner .banner-bg {
z-index:0;
position:absolute;
top:0;
left:0;
}
#banner .left {
float:left;
width:0px;
height:100px;
background:url(img/banner-left-bg.png);
opacity:0.3;
position:relative;
z-index:7;
}
#banner .right {
float:right;
width:0px;
height:100px;
background-color:#34515c;
opacity:0.3;
position:relative;
z-index:5;
}
#banner .left-text, #banner .right-text {
font-family:Verdana, Arial;
font-size:22px;
font-style:normal;
color:#fff;
top:35px;
}
#banner .left-text {
position:absolute;
left:233px;
opacity:0;
z-index:8;
}
#banner .right-text {
position:absolute;
right:662px;
width:630px;;
font-size:24px;
opacity:0;
z-index:6;
}
任何建議？
雖然您幾乎可以完成您定製的jQuery Slider。這[滑塊]（http://www.kyrielles.net/sliderkit/sliderkit_en.html#Demonstrations）通過它自己的插件具有動畫標題功能。但是，對於許多jQuery Sliders現在缺乏的花式塊動畫標題+1。 – arttronics
感謝您的鏈接！我現在正在嘗試整合幻燈片之間的淡入，淡出效果。 – Cris
看看我在答案中提出的jsFiddle。添加任何庫（或爲.animate激活jQuery UI）可以更快地進行快速更改。 – arttronics