FBJS 图像滑块
我正在尝试重新创建类似于以下内容的滑块:
http://www.facebook.com/BacardiLimon?v =app_146177448730789
但显然关于如何使用 FBJS 执行此类操作的文档为零:'(
var eCardPos = 0;
var totalCards = 4;
var animationFadeTime = 300;
var cardUrls = [];
cardUrls[0]= '';
cardUrls[1]= '';
cardUrls[2]= '';
cardUrls[3]= '';
function changeEcardPrev()
{
eCardPos--;
if (eCardPos < 0) {
eCardPos = totalCards-1;
}
showEcard();
}
function changeEcardNext()
{
eCardPos++;
if (eCardPos > totalCards-1) {
eCardPos = 0;
}
showEcard();
}
function changeEcard(pos)
{
eCardPos = pos;
showEcard();
}
function showEcard()
{
var elCard = document.getElementById('cardImage');
var elLink = document.getElementById('cardLink');
var elPreload = document.getElementById('preload_card_'+eCardPos);
for (var i=0;i<totalCards;i++)
{
document.getElementById('cardButton_'+i).removeClassName('active');
}
document.getElementById('cardButton_'+eCardPos).addClassName('active');
elLink.setHref(cardUrls[eCardPos]);
Animation(elCard).to("opacity", 0).duration(animationFadeTime).checkpoint(1, function() {
elCard.setSrc(elPreload.getSrc());
}).to("opacity", 1).duration(animationFadeTime).go();
//Animation(elCard).to("opacity", 1).duration(animationFadeTime).go();
}
我碰巧找到了 src 但我什至不知道从哪里开始:\
编辑:
我想我找到了一些可能有帮助的东西但图像滑动:\ 我只想在按下方向时显示它们,
var numslides = 3;
var slidesvisible = 1;
var currentslide = 0;
var slidewidth = 300;
function goright() {
if (currentslide <= (numslides-slidesvisible-1)) {
Animation(document.getElementById('slideshow_inner')).by('right', slidewidth+'px').by('left', '-'+slidewidth+'px').go();
if (currentslide == (numslides-slidesvisible-1)) {
Animation(document.getElementById('right_button')).to('opacity', '0.3').go();
Animation(document.getElementById('left_button')).to('opacity', '1').go();
}
if (currentslide < (numslides-slidesvisible-1)) { Animation(document.getElementById('left_button')).to('opacity', '1').go(); }
currentslide++;
}
}
function goleft() {
if (currentslide > 0) {
Animation(document.getElementById('slideshow_inner')).by('left', slidewidth+'px').by('right', '-'+slidewidth+'px').go();
if (currentslide == 1) {
Animation(document.getElementById('left_button')).to('opacity', '0.3').go();
Animation(document.getElementById('right_button')).to('opacity', '1').go();
}
if (currentslide > 1) { Animation(document.getElementById('right_button')).to('opacity', '1').go(); }
currentslide--;
}
}
如何让图像淡入和淡出而不是滑动?
Im trying to recreate a slider similar to:
http://www.facebook.com/BacardiLimon?v=app_146177448730789
but apparently there is zero documentation on how to do something like this with FBJS :'(
var eCardPos = 0;
var totalCards = 4;
var animationFadeTime = 300;
var cardUrls = [];
cardUrls[0]= '';
cardUrls[1]= '';
cardUrls[2]= '';
cardUrls[3]= '';
function changeEcardPrev()
{
eCardPos--;
if (eCardPos < 0) {
eCardPos = totalCards-1;
}
showEcard();
}
function changeEcardNext()
{
eCardPos++;
if (eCardPos > totalCards-1) {
eCardPos = 0;
}
showEcard();
}
function changeEcard(pos)
{
eCardPos = pos;
showEcard();
}
function showEcard()
{
var elCard = document.getElementById('cardImage');
var elLink = document.getElementById('cardLink');
var elPreload = document.getElementById('preload_card_'+eCardPos);
for (var i=0;i<totalCards;i++)
{
document.getElementById('cardButton_'+i).removeClassName('active');
}
document.getElementById('cardButton_'+eCardPos).addClassName('active');
elLink.setHref(cardUrls[eCardPos]);
Animation(elCard).to("opacity", 0).duration(animationFadeTime).checkpoint(1, function() {
elCard.setSrc(elPreload.getSrc());
}).to("opacity", 1).duration(animationFadeTime).go();
//Animation(elCard).to("opacity", 1).duration(animationFadeTime).go();
}
I happened to find the src but I dont even know where to start :\
EDIT:
I think I found something that might help but the images slide :\ I just want them to appear when a direction is pressed.
var numslides = 3;
var slidesvisible = 1;
var currentslide = 0;
var slidewidth = 300;
function goright() {
if (currentslide <= (numslides-slidesvisible-1)) {
Animation(document.getElementById('slideshow_inner')).by('right', slidewidth+'px').by('left', '-'+slidewidth+'px').go();
if (currentslide == (numslides-slidesvisible-1)) {
Animation(document.getElementById('right_button')).to('opacity', '0.3').go();
Animation(document.getElementById('left_button')).to('opacity', '1').go();
}
if (currentslide < (numslides-slidesvisible-1)) { Animation(document.getElementById('left_button')).to('opacity', '1').go(); }
currentslide++;
}
}
function goleft() {
if (currentslide > 0) {
Animation(document.getElementById('slideshow_inner')).by('left', slidewidth+'px').by('right', '-'+slidewidth+'px').go();
if (currentslide == 1) {
Animation(document.getElementById('left_button')).to('opacity', '0.3').go();
Animation(document.getElementById('right_button')).to('opacity', '1').go();
}
if (currentslide > 1) { Animation(document.getElementById('right_button')).to('opacity', '1').go(); }
currentslide--;
}
}
How would I get the image to fade in and out rather than slide?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论