0

我正在使用 orbit-jquery-image-slider 插件我可以通过执行此 'animation': 'fade' 但无法幻灯片图像来提供淡入淡出效果我尝试使用 'animation': 'horizo​​ntal-push' 但不起作用请帮助我

<script type="text/javascript">
    $(window).load(function () {
        $('#featured').orbit({
            'animation': 'horizontal-push',
            'bullets': true,
            advanceSpeed: 10000,
        });
        $('.slider-navs').css('position', 'relative');
        $('#featured').css('width', '650px');
        $('#featured').css('height', '210px');

    });

</script>
<div class="holder">
    <div class="above_cont_area " style="height:50px;height: 219px;width: 650px;margin-left: 25px;margin-bottom: 25px;">
        <div id="featured">
            <img src="dummy-images/img1.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img2.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img3.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img4.jpg" data-caption="#htmlCaption" />
            <img src="dummy-images/img5.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img6.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img7.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img8.png" data-caption="#htmlCaption" />
            <img src="dummy-images/img9.png" data-caption="#htmlCaption" />
        </div>
    </div>
4

3 回答 3

0

另一个棘手的问题 22，是 .orbit-timer 和 .orbit-progress 栏不能从 DOM 中隐藏，不显示或幻灯片停止运行。

请参阅以下内容

https://github.com/zurb/foundation/issues/1856#issuecomment-19422603

于 2013-06-14T14:56:52.767 回答
0

该插件要求所有图像具有相同的大小。添加的图像是否具有相同的大小？官方网站在这里

轨道功能将动态确定您的图像集的高度和宽度并相应地缩放，但请确保您的所有图像大小相同，否则较大的图像会从侧面窥视。

于 2013-01-25T05:58:05.837 回答
0

如果你想要淡入淡出效果意味着你必须将动画作为淡入淡出而不是水平推动

$(window).load(function() {
    $('#featured').orbit({
            'animation': 'fade',
            'bullets': true,
            advanceSpeed: 10000
        });
  });
于 2013-01-25T06:03:32.783 回答