【JQuery】360水平环绕全景图代码

最新推荐文章于 2023-04-21 21:39:54 发布

翻译最新推荐文章于 2023-04-21 21:39:54 发布 · 2.2k 阅读

JS或JQuery 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个名为jquery.threesixty.js的jQuery插件，该插件可实现图片360°展示效果。文中详细解释了如何加载插件文件，并通过实例演示了如何设置自动轮播、鼠标移动触发切换以及点击拖动切换等功能。

JQ插件名称：jquery.threesixty.js

官网及下载及说明地址：http://www.mathieusavard.info/threesixty/demo.html

调用方法：$("#mousemove").threesixty({ images:[arr of images], method: 'click', 'cycle': 1, direction: "backward", sensibility: 1 });

栗子：

    <script src="/js/jquery182.js" type="text/javascript"></script>
    <script src="/js/jquery.threesixty.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var arr = [];
            for (var x = 6; x <= 17; x++)  arr.push("images/xiu2-" + x + ".png");
            $("#panorama").threesixty({ images: arr, method: 'auto', 'cycle': 1, direction: "backward", autoscrollspeed: "300" });
        });
    </script>
    <img id="panorama" alt="test" width="500" height="753"/>

说明：

method有三种方法auto和mousemove和click，
auto自动转可以带参数autoscrollspeed: "300"是毫秒/图，其实这个模式可以作为自动图片播放。
mousemove是鼠标在图片上移动，图片就切换。click是按下鼠标拖动，图片才切换。
sensibility影响旋转速度。