Javascript JQuery–；有办法解决这个问题吗？

我是一名摄影师，不是代码专家，但我已经尝试了一段时间来实现这一点——这是一幅动画图像，实现了GIF的效果，而不受256色和像素/噪声的限制。 它的工作原理是在固定的div中转换背景图像。 Javascript就在下面，可以在这里找到它与我的一个图像的工作方式

HTML:

JAVASCRIPT:

var curr_pos = 0; //current background-position
var timer_id = 0;

function rotate_img() {
if (curr_pos == -13858) curr_pos = 0; //if 360 degree done
else curr_pos = curr_pos - 533;
$("#image_box").css("background-position", curr_pos + "px"); //move bacground to the left by 533px
if (curr_pos == -13858) curr_pos = 0;}

function start_rotate() {
timer_id = setInterval(rotate_img, 80);}
function stop_rotate() {
clearInterval(timer_id);}

现在，它工作得很好，除了当它结束时，它似乎在一瞬间显示白色背景，而不是直接跳到开始。有没有办法摆脱这个？我觉得这会打乱人流

另一个问题是–我是否可以在单击图像时添加另一个事件，以便在单击图像时，背景图像将替换为另一个并像上面那样设置动画？在我的代码中会出现什么

---

谢谢大家!

已经有JavaScript和jQuery工具可以帮助您实现这一点：

---

你应该对背景位置数量更具活力，这样你就不会对数字进行猜测。此外，如果将if块保留在图像的全宽位置，则会得到一个白色屏幕，因为无论if块如何，函数都会再次运行。从结束背景位置减去宽度以避免：

// With curr_pos like this, you have a number generated from JavaScript rather than guesswork
var curr_pos = parseInt($("#image_box").css("background-position").slice(0,-2), 10); 

if (curr_pos <= (-13858+533)) { //Take out that nasty white space by accounting for one less frame
    curr_pos = 0+"px";
} else {
    curr_pos = curr_pos - 533 + "px";
}

这使您的标记看起来如下所示：

<div id='image_box'></div>

---

A everything与其在代码之外执行计算（533px宽度*26张幻灯片=13858px），为什么不将这些神奇的数字转换为变量：

function nextSlide() {
  var slideWidth = 533;
  var slideCount = 26;

  var currentX = parseInt($imageContainer.css('background-position'), 10);
  currentX = (currentX - slideWidth) % (slideWidth * slideCount);

  $imageContainer.css('background-position', currentX);
}

mod（%）运算符消除了在if/

else

块中出现混淆的

的需要，并且正确命名的变量使逻辑清晰

另一个小变化是，您可以使用jQuery事件绑定，而不是通过
onmouseover
/
onmouseout
将悬停事件直接附加到html：

$imageContainer.hover(start_rotate, stop_rotate);

您也可以附加单击事件来更改图像：

$imageContainer.click(function() {
  $imageContainer.css('background-image',
      'url("http://www.studioprivate.co.uk/newImage.jpg")');
  $imageContainer.css('background-position', 0);    
});

如果新图像具有不同的slideWidth或slideCount，则您必须对
nextSlide
方法进行一些调整，但本示例应该可以帮助您

把它们放在一起-
里面有很多神奇的数字，你应该努力消除它们。还有，你能做一个简单的决定，这样别人就更容易帮助你了吗？嘿！这并不能直接回答我的问题，所以我不能选择它作为答案，但它是一个惊人的资源。非常感谢。谢谢克里斯托弗！我读过，但@ljfranklin的方法对我来说更有意义，因为它的代码少，数学多。有了这个，你就失去了我的.slice，因为我从来没有用过它：p太好了，谢谢你！现在我知道这完全是另一个问题，但是如果我想在第一次点击时用一个新的替换背景图像，然后第二次点击会将其返回到原始图像，那会更复杂吗？你只需要多加几行就可以完成这一点。更新。
function nextSlide() {
  var slideWidth = 533;
  var slideCount = 26;

  var currentX = parseInt($imageContainer.css('background-position'), 10);
  currentX = (currentX - slideWidth) % (slideWidth * slideCount);

  $imageContainer.css('background-position', currentX);
}

$imageContainer.hover(start_rotate, stop_rotate);

$imageContainer.click(function() {
  $imageContainer.css('background-image',
      'url("http://www.studioprivate.co.uk/newImage.jpg")');
  $imageContainer.css('background-position', 0);    
});