1

我正在研究根据用户单击的箭头来产生特定的过渡效果。

所以我看到了这篇文章，我正在尝试以我的方式调整它，但没有成功。

所以我有这些图像：

<div id="slider" class="nivoSlider">
    <?php   foreach($SlideShowImages as $SlideShowImage){
    ?>
        <img src="<?php echo base_url($SlideShowImage['image_url']);?>" data-thumb="" alt="Image SlideShow"/>
    <?php
    }
    ?>
    </div>

如果用户单击该箭头，我希望这样：

<a class="nivo-prevNav">Prev</a>

他有特定的效果，所以我尝试了这个：

$('.nivo-prevNav').on('click', function(){
       $('#slider img').attr("data-transition","slideInLeft");
  });

没有成功 ...

编辑：多亏了roine，我已经使这个功能工作了，但我有最后一个问题，首先，当我点击箭头时，它似乎只在我第二次点击它时改变了过渡效果。我的理解是，第一次单击箭头时，我在图片上应用更改，然后，第二次，nivo 滑块的过程会考虑这些更改。

所以我在 nivo 滑块自定义中看到了这些行：

beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition

也许我应该在这里调用该函数？

谢谢

4

1 回答 1

2

我在这里找到了解决方案：

// Assigning a Specific Effect to the Prev/Next Buttons
    $('.nivo-prevNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDown");
    });

    $('.nivo-nextNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDownLeft");
    });
于 2012-08-04T19:07:44.517 回答