我正在尝试使用 JavaScript创建像这样的 360 度图像查看器。
但是我无法实现导航链接左,右,前和后(缓慢转动)的效果。我需要保持循环迭代片刻,我使用了该setInterval()
函数,但它对我不起作用。(这个js是用13张图片来实现的。)
$(function() {
var leftImage =1 ;
var rightImage = 7;
var frontImage = 4;
var backImage = 10;
var arr1 = [];
for (var x=1; x<= 13; x++)
arr1.push("images/"+x + ".jpg");
function showImage(img){
$('#mousemove').attr('src', 'images/'+img+'.jpg');
}
function getCurrentImage(){
var src = $("#mousemove").attr("src");
var selected = src.split("/");
var index = selected[1].split(".");
var start = parseInt(index[0]);
return start;
}
$(".pre").click(function(){
var img = getCurrentImage() - 1;
if (img==0) img=13;
$('#mousemove').attr('src', 'images/'+img+'.jpg');
});
$(".next").click(function(){
var img = getCurrentImage()+ 1;
if (img==13) img=1;
$('#mousemove').attr('src', 'images/'+img+'.jpg');
});
$(".front").click(function(){
var img = getCurrentImage();
while( (img-1) != frontImage ){
if (img==13) img=1;
var reid = setInterval("showImage('+img+')", 5000);
img++;
}
});
$(".left").click(function(){
var img = getCurrentImage();
while( (img-1) != leftImage ){
if (img==13) img=1;
showImage(img);
img++;
}
});
$(".back").click(function(){
var img = getCurrentImage();
while( (img-1) != backImage ){
if (img==13) img=1;
showImage(img);
img++;
}
});
$(".right").click(function(){
var img = getCurrentImage();
while( (img-1) != rightImage ){
if(img==13) img=1;
showImage(img);
img++;
}
});
$("#mousemove").threesixty({images:arr1, method:'mousemove', 'cycle':2, direction:"backward"});
});