java script 360图像旋转代码减慢旋转速度
我正在尝试创建 360 度图像查看器,例如 这使用JavaScript。
但我无法实现导航链接左、右、前、后(缓慢转动)的效果。我需要暂时保留循环迭代,我使用了 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"});
});
I'm trying to create 360 degree image viewer like this using JavaScript.
But I couldn't achieve the effect for navigation link left, right, front and back (turning slowly). I need to hold loop iteration for a moment, I used the setInterval()
function, and it didn't work for me. (This js is using 13 image to achieve.)
$(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"});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这部分代码的含义是什么?
您的意思是例如这个吗?
What does this parts of code means?
Did you mean for example this?