最近研究了vivo官網的一個360圖片循轉的小demo，感覺挺有趣的，於是研究了一番，把遇到的一些問題總結了下，只是從基礎層面研究，對於想實現這個功能的獲取有點幫助。大神還請幫忙指點迷津。多謝評價。
言歸正傳，這個功能總體來說是使用了jq的一個UIMIX的插件，把我們想實現這個功能的div設置成UIMIX對象，然後在js中操縱UIMIX對象來實現的。首先我們要明確一點，想要使用插件必須把操作元素init成相關插件的對象，UIMIX也不例外。話不多說，直接貼碼：
html：
<<div id="threesixty" image_count='37' path_pattern='./image/img副本/white#index#.jpg' end_frame='74' scale='1' fix_width='500' fix_height='500' max_width='500' max_height='500'>
<em class="loading"><p>0%</p></em>
<ol></ol>
</div>
分析：我們操作的就是這個id爲threesixty的div對象，image_count爲要顯示的圖片的個數，也就是360圖片循轉需要的總圖片數，path_pattren爲要顯示的圖片的地址，其中#index#將用來被替換成圖片的區分符，例如1，2，3，fix_width爲設置圖片的最大寬度，後面的屬性也是一樣。
css：
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
a
#threesixty{position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;}
#threesixty ol{display: none;}
#threesixty img{position:absolute;top:0;width:100%;height:auto;}
.current-image{visibility:visible;width:100%;}
.previous-image{visibility:hidden;width:0;}
#threesixty .loading{position:absolute;left:50%;top:50%;width:90px;height:90px;margin-left:-45px;margin-top:-50px;display:none;}
#threesixty .loading span{position:absolute;top:50%;width:100%;color:#333;font-size:12px;font-family:Arial, Verdana, sans;text-align:center;line-height:1em;margin-top:-0.5em;}
#threesixty em.loading{width:55px;padding:40px 0 0 0;display:block;position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px;background:url(images/loading-ico.gif) no-repeat 10px 0;z-index:999999;text-align:center;font-size:12px;color:#219edf;font-family:Arial;font-style:normal;}
</style>
關鍵點就是js：
首先要聲明UIMIX對象，然後設置UIMIX.fullview，init這個對象，下面是對每個方法的粗略解釋：
relocate爲設置要顯示UIMIX對象的寬高以及邊距的；
imageLoaded和imageLoaded配合使用，他的實現原理就是爲ol設置image_count個li標籤，並在li標籤裏對應的創建ima標籤。
然後是start方法，refresh方法，然後是render跟getNormalizedCurrentFrame方法循環調用image_count次，在這裏圖片就會出現了，基本功能就實現了。
因爲之前遇到過換圖片之後圖片不顯示的問題，在這裏說一下我解決的方法：
首先，你得讓序列數爲0，存放照片的數組爲空：UIMIX.fullview.data.currentFrame=0;UIMIX.fullview.data.frames=[];
其次，就是把我們之前在ol創建的li標籤刪掉，以便重新創建：
UIMIX.fullview.data.container.children('ol').find('li').each(function(){
$(this).remove();
});
然後，就是改變image_count和path_pattern屬性爲你要改變的值：
$('#threesixty').attr('image_count',18);
$('#threesixty').attr('path_pattern','./image/ds01bai/#index#.png');//這裏的路徑改變之後圖片也會改變；
最後，要重新init一下，要重新init一下，要重新init一下，重要的事情說三遍。這樣基本就可以了。
下面爲完整代碼：
css:
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
a
#threesixty{position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;}
#threesixty ol{display: none;}
#threesixty img{position:absolute;top:0;width:100%;height:auto;}
.current-image{visibility:visible;width:100%;}
.previous-image{visibility:hidden;width:0;}
#threesixty .loading{position:absolute;left:50%;top:50%;width:90px;height:90px;margin-left:-45px;margin-top:-50px;display:none;}
#threesixty .loading span{position:absolute;top:50%;width:100%;color:#333;font-size:12px;font-family:Arial, Verdana, sans;text-align:center;line-height:1em;margin-top:-0.5em;}
#threesixty em.loading{width:55px;padding:40px 0 0 0;display:block;position:absolute;top:50%;left:50%;margin:-27px 0 0 -27px;background:url(images/loading-ico.gif) no-repeat 10px 0;z-index:999999;text-align:center;font-size:12px;color:#219edf;font-family:Arial;font-style:normal;}/*http://www.vivo.com.cn/vivo/xplay3s/360/img-white/white#index#.jpg*/
</style>
html：
<div id="threesixty" image_count='37' path_pattern='./image/img副本/white#index#.jpg' end_frame='74' scale='1' fix_width='500' fix_height='500' max_width='500' max_height='500'>
<em class="loading"><p id="ppp">0%</p></em>
<ol></ol>
</div>
<button style='width: 100px;height: 100px;' οnclick="change()">改變</button>
js:
<script type="text/javascript">
function change(){
UIMIX.fullview.data.currentFrame=0;
UIMIX.fullview.data.frames=[];
UIMIX.fullview.data.container.children('ol').find('li').each(function(){
$(this).remove();
});
$('#threesixty').attr('image_count',18);
$('#threesixty').attr('path_pattern','./image/ds01bai/#index#.png');//這裏的路徑改變之後圖片也會改變
UIMIX.fullview.data.loadedImages=0;
$(document).ready(UIMIX.fullview.init);
}
if (typeof(UIMIX) == 'undefined') UIMIX = {};
UIMIX.fullview = {
data: {
ready: false,
dragging: false,
pointerStartPosX: 0,
scale: 1,
fix_width: -1,
fix_height: -1,
max_width: -1,
max_height: -1,
monitorStartTime: 0,
monitorInt: 10,
ticker: 0,
speedMultiplier: 5,
spinner: false,
container: false,
pathPattern: false,
totalFrames: 180,
currentFrame: 0,
frames: [],
endFrame: -720,
loadedImages: 0
},
relocate: function() {
// alert(12);
var w, h, l, t;
if (UIMIX.fullview.data.fix_width > 0 && UIMIX.fullview.data.fix_height > 0) {
l = Math.max(0, (w - UIMIX.fullview.data.fix_width) / 2);
t = Math.max(0, (h - UIMIX.fullview.data.fix_height) / 2);
w = UIMIX.fullview.data.fix_width;
h = UIMIX.fullview.data.fix_height
} else {
w = UIMIX.fullview.data.max_width > 0 ? Math.min(UIMIX.fullview.data.max_width, $(window).width()) : $(window).width();
h = UIMIX.fullview.data.max_height > 0 ? Math.min(UIMIX.fullview.data.max_height, $(window).height()) : $(window).height();
if (w / h > UIMIX.fullview.data.scale) {
w = h * UIMIX.fullview.data.scale
} else {
h = w / UIMIX.fullview.data.scale
}
l = ($(window).width() - w) / 2;
t = ($(window).height() - h) / 2
}
UIMIX.fullview.data.container.css({
width: w,
height: h,
marginTop: 0,
marginLeft: 0
})
},
imageLoaded: function(img) {
alert(img.src);
// img.src = 'http://b.hiphotos.baidu.com/album/s%3D1600%3Bq%3D90/sign=4f04be8ab8014a90853e42bb99470263/b8389b504fc2d562d426d1d5e61190ef76c66cdf.jpg?v=tbs'
var li = $('<li></li>');
var image = $('<img>').attr('src', img.src).addClass("previous-image").appendTo(li);
UIMIX.fullview.data.frames.push(image);
UIMIX.fullview.data.container.children('ol').append(li);
UIMIX.fullview.data.loadedImages++;
UIMIX.fullview.data.container.find('em.loading p').text(Math.floor(UIMIX.fullview.data.loadedImages / UIMIX.fullview.data.totalFrames * 100) + "%");
if (UIMIX.fullview.data.loadedImages == UIMIX.fullview.data.totalFrames) {
UIMIX.fullview.start()
} else {
UIMIX.fullview.loadImage()
}
},
loadImage: function(force) {
// alert(0);
var imageName = UIMIX.fullview.data.pathPattern.replace('#index#', UIMIX.fullview.data.loadedImages + 1);
// alert(imageName);
if (force) imageName += "?" + new Date().getTime();
var img = new Image();
img.src = imageName;
// alert(img.src);
if (img.complete) {
UIMIX.fullview.imageLoaded(img);
return
}
$(img).load(function() {
UIMIX.fullview.imageLoaded(img)
}).error(function() {
if (force) {
UIMIX.fullview.data.container.html('<div style="text-align:center;margin-top:50%;">加載失敗，<a href="' + location.href + '">請重試</a></div>')
} else {
UIMIX.fullview.loadImage(true)
}
})
},
start: function() {
// alert(1);
UIMIX.fullview.data.frames[0].removeClass("previous-image").addClass("current-image");
UIMIX.fullview.data.container.children("em.loading").fadeOut("slow",
function() {
// alert('測試');
// UIMIX.fullview.data.container.children("em.loading").remove();
UIMIX.fullview.data.container.children('ol').fadeIn("slow");
UIMIX.fullview.data.ready = true;
UIMIX.fullview.refresh()
})
},
init: function() {
// alert(2);
UIMIX.fullview.data.container = $('#threesixty');
UIMIX.fullview.data.container.on({
mousedown: function() {
$("body").addClass("drag")
},
mouseup: function() {
$("body").removeClass("drag")
}
});
if (UIMIX.fullview.data.container.attr('image_count')) {
UIMIX.fullview.data.totalFrames = parseInt(UIMIX.fullview.data.container.attr('image_count'))
}
if (UIMIX.fullview.data.container.attr('end_frame')) {
UIMIX.fullview.data.endFrame = parseInt(UIMIX.fullview.data.container.attr('end_frame'))
}
if (UIMIX.fullview.data.container.attr('scale')) {
UIMIX.fullview.data.scale = parseInt(UIMIX.fullview.data.container.attr('scale'))
}
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
if (UIMIX.fullview.data.container.attr('fix_width')) {
UIMIX.fullview.data.fix_width = parseInt(UIMIX.fullview.data.container.attr('fix_width'))
}
if (UIMIX.fullview.data.container.attr('fix_height')) {
UIMIX.fullview.data.fix_height = parseInt(UIMIX.fullview.data.container.attr('fix_height'))
}
}
if (UIMIX.fullview.data.container.attr('max_width')) {
UIMIX.fullview.data.max_width = parseInt(UIMIX.fullview.data.container.attr('max_width'))
}
if (UIMIX.fullview.data.container.attr('max_height')) {
UIMIX.fullview.data.max_height = parseInt(UIMIX.fullview.data.container.attr('max_height'))
}
$(window).resize(UIMIX.fullview.relocate);
UIMIX.fullview.relocate();
UIMIX.fullview.data.pathPattern = UIMIX.fullview.data.container.attr('path_pattern');
try {
UIMIX.fullview.data.spinner = new CanvasLoader('loading');
UIMIX.fullview.data.spinner.setShape("spiral");
UIMIX.fullview.data.spinner.setDiameter(80);
UIMIX.fullview.data.spinner.setDensity(80);
UIMIX.fullview.data.spinner.setRange(1);
UIMIX.fullview.data.spinner.setSpeed(1);
UIMIX.fullview.data.spinner.setColor("#008cd6");
UIMIX.fullview.data.spinner.show()
} catch(e) {
UIMIX.fullview.data.spinner = $("#spinner")
}
UIMIX.fullview.data.container.children("em.loading").fadeIn("slow");
UIMIX.fullview.loadImage();
$(document).mousedown(function(event) {
event.preventDefault();
pointerStartPosX = UIMIX.fullview.getPointerEvent(event).pageX;
UIMIX.fullview.data.dragging = true
}).mouseup(function(event) {
event.preventDefault();
UIMIX.fullview.data.dragging = false
}).mousemove(function(event) {
event.preventDefault();
UIMIX.fullview.trackPointer(event)
}).live("touchstart",
function(event) {
event.preventDefault();
pointerStartPosX = UIMIX.fullview.getPointerEvent(event).pageX;
UIMIX.fullview.data.dragging = true
}).live("touchmove",
function(event) {
event.preventDefault();
UIMIX.fullview.trackPointer(event)
}).live("touchend",
function(event) {
event.preventDefault();
UIMIX.fullview.data.dragging = false
})
},
render: function() {
// alert(5);
if (UIMIX.fullview.data.currentFrame !== UIMIX.fullview.data.endFrame) {
var frameEasing = UIMIX.fullview.data.endFrame < UIMIX.fullview.data.currentFrame ? Math.floor((UIMIX.fullview.data.endFrame - UIMIX.fullview.data.currentFrame) * 0.1) : Math.ceil((UIMIX.fullview.data.endFrame - UIMIX.fullview.data.currentFrame) * 0.1);
UIMIX.fullview.data.frames[UIMIX.fullview.getNormalizedCurrentFrame()].removeClass("current-image").addClass("previous-image");
UIMIX.fullview.data.currentFrame += frameEasing;
UIMIX.fullview.data.frames[UIMIX.fullview.getNormalizedCurrentFrame()].removeClass("previous-image").addClass("current-image")
} else {
window.clearInterval(UIMIX.fullview.data.ticker);
UIMIX.fullview.data.ticker = 0
}
},
refresh: function() {
// alert(6);
if (UIMIX.fullview.data.ticker === 0) {
UIMIX.fullview.data.ticker = setInterval(UIMIX.fullview.render, Math.round(1000 / 60))
}
},
getNormalizedCurrentFrame: function() {
// alert(7);
var c = -Math.ceil(UIMIX.fullview.data.currentFrame % UIMIX.fullview.data.totalFrames);
if (c < 0) c += (UIMIX.fullview.data.totalFrames - 1);
return c
},
getPointerEvent: function(event) {
return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event
},
trackPointer: function(event) {
//觸碰走的方法
if (!UIMIX.fullview.data.ready || !UIMIX.fullview.data.dragging) return;
var x = UIMIX.fullview.getPointerEvent(event).pageX;
if (UIMIX.fullview.data.monitorStartTime < new Date().getTime() - UIMIX.fullview.data.monitorInt) {
var dis = x - UIMIX.fullview.data.pointerStartPosX;
UIMIX.fullview.data.endFrame = UIMIX.fullview.data.currentFrame + Math.ceil((UIMIX.fullview.data.totalFrames - 1) * UIMIX.fullview.data.speedMultiplier * (dis / UIMIX.fullview.data.container.width()));
UIMIX.fullview.refresh();
UIMIX.fullview.data.monitorStartTime = new Date().getTime();
UIMIX.fullview.data.pointerStartPosX = x
}
}
};
$(document).ready(UIMIX.fullview.init);
</script>