Nivo 滑块为每个图像提供不同的过渡效果

Posted 2023-05-07

【中文标题】Nivo 滑块为每个图像提供不同的过渡效果

【英文标题】：Nivo slider different transition effect for each image

【发布时间】：2019-08-10 08:41:45

【问题描述】：

我正在编写一个使用 Nivo Slider 的脚本。我有这个工作，但我想让每个图像都有不同的过渡效果。 使用 mysql 调用加载图像，该调用将 ImageName 和 Effect 作为 php 变量返回。

$row_Signage['PromotionImage'] = ImageName: image_1.png $row_Signage['Effect'] = 效果：slideInRight

Nivo Slider 的配置代码是：

$(window).load(function() 
  var TimeLapse = '<?php echo $row_Setting['TimeLapse'];?>';    
  var Effect = '<?php echo $row_Setting['Effect'];?>';  
  console.log("EFFECT", Effect);
  var AnimSpeed = '<?php echo $row_Setting['AnimSpeed'];?>';    
  $('#slider').nivoSlider(
        effect: Effect,
    slices: 30,
    boxCols: 16,
    boxRows: 8,
    animSpeed: AnimSpeed,
    pauseTime: TimeLapse, 
    startSlide: 0,
    directionNav: false,
    controlNav: false,
    controlNavThumbs: false,
    pauseOnHover: false,
    manualAdvance: false,
    //prevText: 'Prev',
    //nextText: 'Next',
    randomStart: false,
    beforeChange: function(),
    afterChange: function(),
    slideshowEnd: function(),
    lastSlide: function(),
    afterLoad: function()
);
);

然后我有一个 PHP While 循环来显示图像：

if($totalRows_Signage > 0)
    while($row_Signage = mysql_fetch_array($Signage))
          echo '<img src="/'.$ImagePath .''.$row_Signage['PromotionImage'].'" data-transition="'.$row_Signage['Effect'].'"/> ';
      $i++;
    
 else 
    echo '<img src="/'.$DefaultImagePath .'"/>';

我遇到的问题是 while 循环中的 echo 语句没有拾取数据转换变量，我尝试了多种方法来编写回显图像的行。谁能看到我哪里出错了。

非常感谢您的帮助和时间。

【参考方案1】：

回到这个问题时，它实际上是在使用我发布的代码。奇怪，但它有效。