全屏设置用法:
引入css:
#container{
padding-top: 50px;
}
html,body{
background: rgb(73,74,95);
}
h4{
color:#000;
}
.product1{
width:1000px;
height: 447px;
}
引入外部js:
<script type="text/javascript" src='https://download.shengli.com/ui/control/scroll_3d/js/threesixty.fullscreen.js'></script>
引入html:
<div class="threesixty product1">
<div class="spinner">
<span>0%</span>
</div>
<ul class="threesixty_images"></ul>
</div>
引入js:
function init(){
var _width = $('.product1').width(),
_height = $('.product1').height();
var product1 = $('.product1').ThreeSixty({
totalFrames: 52,
endFrame: 30,
currentFrame: 1,
imgList: '.threesixty_images',
progress: '.spinner',
imagePath:'images/car/',
filePrefix: '',
ext: '.png',
height: _height,
width: _width,
navigation: true,
disableSpin: false,
plugins: ['ThreeSixtyFullscreen']
});
}
init();