用户控制配置用法：

引入css:

#container{
  padding-top: 50px;
}
html,body{
  background: rgb(73,74,95);
}
h4{
  color:#000;
}
.product1{
  width:1000px;
  height: 447px;
}

引入html:
<div class="threesixty product1">
    <div class="spinner">
      <span>0%</span>
    </div>
    <ul class="threesixty_images"></ul>
    </div>
    <div style="text-align:center">
    <a class="btn btn-danger custom_previous btn"><i class="fa fa-backward"></i> Previous</a>
    <a class="btn btn-primary custom_play btn-primary btn"><i class="fa fa-play"></i> Play</a>
    <a class="btn btn-primary custom_stop btn-primary btn"><i class="fa fa-pause"></i> Pause</a>
    <a class="btn btn-danger custom_next btn">Next <i class="fa fa-forward"></i></a>
</div>
引入js:

function init(){
  var _width = $('.product1').width(),
  _height = $('.product1').height();
  var car = $('.product1').ThreeSixty({
    totalFrames: 52,
    endFrame: 52,
    currentFrame: 1,

    imgList: '.threesixty_images',
    progress: '.spinner',
    imagePath:'images/car/',
    filePrefix: '',
    ext: '.png',
    height: _height,
    width: _width,
    navigation: false,
    disableSpin: true
  });
  $('.custom_previous').bind('click', function(e) {
    car.previous();
  });
  $('.custom_next').bind('click', function(e) {
    car.next();
  });
  $('.custom_play').bind('click', function(e) {
    car.play();
  });
  $('.custom_stop').bind('click', function(e) {
    car.stop();
  });
}

init();