jQuery plugin : Threesixty-slider 360度图片滑动展示

[ 作者:笑傲江湖 发布于:2013年-4月-17日 12:45 星期三  分类:百 宝 箱 ]

插件介绍:
  Threesixty-slider 是一个基于 jQuery 的插件,用它可以创建360度图片滑动展示。插件提供了丰富的自定义参数选项,可以按需定制如何全方位展示图片。
江湖点评:
  这插件功能是不错,当然,如果你想用好,关键还是要准备需要展示的图片,也就是360度的全方位图片。要是自己动手拍摄,最好是有个简易的摄影棚,需要拍摄的物品放在一个能旋转的盘子上,相机用脚架固定好,接上快门线,锁定曝光参数,然后就可以拍摄了,至于360度内,你想拍摄多少角度的照片,看你的需求了,图片越多,使用这个插件展示的时候,图片滑动就越连贯,效果就越好。
插件展示:


HTML 代码
<div class="threesixty product1">
          <div class="spinner">
		<span>0%</span>
          </div>
          <ol class="threesixty_images"></ol>
</div>
Javascript 代码
window.onload = init;

      var product;
      function init(){

        product1 = $('.product1').ThreeSixty({
          totalFrames: 72, //展示图片总数
          endFrame: 72, //展示结束帧
          currentFrame: 1, //展示开始起始帧
          imgList: '.threesixty_images', //展示图片列表的选择器
          progress: '.spinner', //加载图片时Loading的选择器
          imagePath:'assets/product1/', //展示图片所在路径
          filePrefix: 'ipod-', //图片文件名前缀
          ext: '.jpg', //图片扩展名
          height: 265, //图片高度
          width: 400, //图片宽度
          navigation: true //是否开启导航
        });

      }

插件作者源地址:http://creativeaura.github.io/threesixty-slider/

Threesixty-slider.zip
963.12KB

微信支付宝

标签: jQuery Plugin 360 Threesixty slider

评论0 引用0 浏览3227

上一篇 << 适马 18-35mm F1.8 DC HSM  |  下一篇 >> 年年有今日

说点什么:

正文内容:

 




图片博文
别克全新都市SUV 昂科拉