threesixty.js360度产品图片预览jQuery插件

所属分类:媒体-图片展示,滑块和旋转

 44403  529  查看评论 (31)
分享到微信朋友圈
X
threesixty.js360度产品图片预览jQuery插件 ie兼容6

安装

可以通过bower来安装该360度产品图片预览插件。

bower install threesixty-slider 

使用方法

下载压缩包,在页面中引入jquery,threesixty.min.js和threesixty.css文件。

<link href="css/threesixty.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/threesixty.min.js"></script>

HTML结构

360度产品图片预览特效的基本HTML结构如下:

<div class="threesixty product1">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该360度产品图片预览插件。

window.onload = init;
var product;
function init() {
    product1 = $('.product1').ThreeSixty({
        totalFrames: 52,
        endFrame: 30,
        currentFrame: 1,
        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath: 'img/car/',
        filePrefix: '',
        ext: '.png',
        height: 447,
        width: 1000,
        navigation: true,
        disableSpin: false
    });
}


相关插件-图片展示,滑块和旋转

jQuery放大镜插件cloudzoom.js

jQuery放大镜插件cloudzoom.js,可以实现切换图片,支持滚轮控制放大比例
  图片展示
 43507  411

HTML5/CSS3超酷焦点图特效

焦点图插件切换效果比较简单,但是外观和功能却十分强大。该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用。
  图片展示
 32878  306

jQuery全屏图片轮播插件fullpage.js

jQuery全屏图片轮播插件fullpage.js
  图片展示
 63046  397

jQuery加vue 3D盒子旋转展示

3D旋转盒子,全景展示,可选择图片,设置宽高
  图片展示
 35194  367

讨论这个项目(31)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ??Kwon丶? 0
    2022/11/15 16:31:43
    可以垂直旋转吗 回复
    馨彤粑粑 0
    2022/5/11 11:16:53
    Jones 0
    2021/6/25 9:45:51
    怎么给一个角度的图片加上标记,像汽车之家那样一样啊
        西瓜0
        2021/6/25 10:51:55
        div浮动层,使用css:position设置。position: relative; 绝对定位,position:absolute;相对定位
        Jones0
        2021/6/25 10:58:46
        这很多图片结合的插件要基于这个插件给某个图片添加一个锚点,你居然和我说绝对定位
        西瓜0
        2021/6/25 11:07:12
        看来是我理解错你想法,我以为你只是想在整个全景图上面加个标签。
        Jones0
        2021/6/25 11:27:43
        有什么参数可以加锚点吗
        西瓜0
        2021/6/25 12:23:05

        看了一下汽车之家的,自己结合一下了,

        https://www.jq22.com/jquery-info12879

        锚点结构差不多。

    回复
    李思 0
    2018/8/18 15:10:09
    很好用的插件
        NANA0
        2018/9/27 10:20:55
        没有币怎么办
    回复
    ▄︻┻┳═一 0
    2018/5/2 17:07:08
    o子木 0
    2018/3/29 10:48:03
    蜂子 0
    2018/1/26 19:41:51

    不错!!!!!

    回复
    陌然浅笑 0
    2017/12/27 16:21:22
    の芳程式の 0
    2017/4/25 3:36:49
    米得说 0
    2017/1/23 16:23:06
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复