网页用了插件jquery.royalslider做的焦点图-如何自动播放

就像这个，参考这个案例的http://www.internetke.com/jsEffects/2015021501/，

我已经设置了 autoPlay:true, ，为什么还是不能自动播放？只能拖动，帮下忙，谢谢！！

transitionType:'move', //切换过渡类型 move或fade
slidesOrientation:'horizontal', //滑动方向上下 'vertical'左右‘horizontal’
globalCaption: true,
imageAlignCenter: true, //幻灯片是否居中对齐
deeplinking: {
enabled: true,
change: false
},

imgWidth: 2000, //所有图片的基本宽度
imgHeight: 476,
});
});

</script>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

你知我知皆知 2024-07-23 20:35

关注

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使jQuery.royalslider实现自动播放功能，你需要在设置完autoPlay:true后，添加一个事件监听器来触发自动播放。以下是修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery.royalslider自动播放示例</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <style>
        #full-width-slider {
            width: 100%;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.royalslider/1.9.1/jquery.royalslider.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#full-width-slider").royalSlider({
                autoPlay: true,
                arrowsNav: true,
                loop: true,
                navigation: "bullets",
                autoScaleSlider: true,
                arrowsNavAutoHide: false,
                autoScaleSliderWidth: 840,
                autoScaleSliderHeight: 250,
                controlNavigation: 'thumbnails',
                thumbsFitInViewport: false,
                navigateByClick: true,
                startSlideId: 0,
                transitionType: 'move',
                slidesOrientation: 'horizontal',
                globalCaption: true,
                imageAlignCenter: true,
                deeplinking: {
                    enabled: true,
                    change: false
                },
                imgWidth: 2000,
                imgHeight: 476
            });
        });
    </script>
</head>
<body>
<div id="full-width-slider">
    <!-- 灯箱内容 -->
</div>
</body>
</html>

在这个例子中，我们首先引入了必要的库和文件，然后使用$(document).ready()函数初始化皇家滑块，并将其配置为自动播放。

请注意，此代码将滑块的宽度设置为100%，这可能不会正确地适应屏幕尺寸，你可能需要根据实际情况调整它。此外，如果你正在使用ASP.NET Web Forms，请确保你的页面已经加载了jQuery库。