FBJS 图像滑块

发布于 2024-09-18 05:52:48 字数 2751 浏览 0 评论 0原文

我正在尝试重新创建类似于以下内容的滑块:

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文