Question

即时通讯使用orbit-jquery-image-slider插件我可以通过执行此'动画'来提供淡入淡出效果：'淡入'但不能幻灯片图像我试图使用'动画'：'水平推送'但不工作请帮帮我

<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>

Answer 1

此插件要求所有图像都具有相同的大小。添加的图像是否具有相同的大小？官方网站是here

轨道功能将动态确定您的图像集的高度和宽度，并相应地缩放，但要确保所有图像的大小相同，或者较大的图像将在侧面查看。

Answer 2

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

$(window).load(function() {
    $('#featured').orbit({
            'animation': 'fade',
            'bullets': true,
            advanceSpeed: 10000
        });
  });

Answer 3

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

请参阅以下

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

我使用带插件的orbit-jquery-image-slider插件是图像不滑动？

3 个答案: