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

梁丘琛
2023-12-01

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影响旋转速度。

 

 类似资料: