JeeHuangBingGui-threesixty360
/
index2.html

<!DOCTYPE html>
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>threesixty.js-360度产品图片预览jQuery插件</title>
<link rel="stylesheet" href="./threesixty/bootstrap-3.3.4.css">
<link rel="stylesheet" href="./threesixty/font-awesome.4.6.0.css">
<link rel="stylesheet" type="text/css" href="./threesixty/default.css">
<link rel="stylesheet" href="./threesixty/threesixty.css">
<style type="text/css">
		#container{
			padding-top: 50px;
		}
	</style>
<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
<header class="jq22-header">
<h1>threesixty.js-360度产品图片预览jQuery插件 <span>A jQuery 360 image slider plugin</span></h1>
<div class="jq22-demo center">
<a href="index.html">Default Settings</a>
<a href="index2.html" class="current">Custom controls</a>
<a href="index3.html">Responsive</a>
<a href="index4.html">Fullscreen</a>
</div>
</header>
<section class="container-fluid" id="container">
<div class="threesixty product1" style="width: 1000px; height: 447px;">
<div class="spinner" style="margin-top: 208.5px; display: none;">
<span>100%</span>
</div>
<ol class="threesixty_images" style="display: block;">
</ol>
</div>
<div style="text-align:center">
<a class="btn btn-danger custom_previous"><i class="fa fa-backward"></i> Previous</a>
<a class="btn btn-primary custom_play"><i class="fa fa-play"></i> Play</a>
<a class="btn btn-primary custom_stop"><i class="fa fa-pause"></i> Pause</a>
<a class="btn btn-danger custom_next">Next <i class="fa fa-forward"></i></a>
</div>
</section>
<script src="./threesixty/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="./threesixty/threesixty.min.js"></script>
<script type="text/javascript">
    window.onload = init;

    var product;
    function init(){

      car = $('.product1').ThreeSixty({
        totalFrames: 52,
        endFrame: 52,
        currentFrame: 1,

        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath:'threesixty/',
        filePrefix: '',
        ext: '.png',
        height: 447,
        width: 1000,
        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();
      });
    }

  </script>

</body></html>