动画精灵出现问题

Question

我有一个精灵(div=slider) ，其中包含4张照片。 我需要使用JavaScript对其进行动画处理，以便在单击箭头按钮(div=leftArrow, rightArrow) ，它会创建4张照片的幻灯片演示，以左右移动。 我尝试了几种不同的方法，但无法使其动画。

这是我目前拥有的。 任何建议表示赞赏...

 $("#leftArrow").onclick(function() { ("#slider").animate({ left: "200px" }); }); $("#rightArrow").onclick(function() { ("#slider").animate({ right: "200px" }); }); 

 h1 { color: #0000ff; /*blue*/ font-size: 44px; } .container { max-height: 520px; background-color: #808080; /*grey*/ } #leftArrow, #rightArrow { display: inline-block; width: 38px; height: 50px; } #leftArrow { position: relative; /*top: 0;*/ top: 235px; left: 2%; width: 5%; height: 50px; background: url('../images/left_arrow.png') 0 0 no-repeat; z-index: 10; } #rightArrow { position: relative; /*top: 0;*/ top: 235px; left: 87.5%; width: 5%; height: 50px; background: url('../images/right_arrow.png') bottom right no-repeat; z-index: 10; } #slider { position: relative; height: 520px; max-width: 792px; margin: 0 auto; /*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/ background-image: url('../images/Animate-Sprite_520a.png'); background-repeat: no-repeat; } #startApp { width: 235px; margin: 0 auto; } #startApp ul { list-style-type: none; } #startApp ul li a { display: inline-block; text-decoration: none; width: 150px; text-align: center; background-color: steelblue; border: 2px solid #808080; color: white; font-size: 32px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1> Fox Valley Runner Club</h1> <div class="container"> <div id="slider"> <button id="leftArrow" onclick="move('left');" class="fbtnFirst" /button> <button id="rightArrow" onclick="move('right');" class="fbtnLast"/button> </div> </div> <div id="startApp"> <ul> <li><a href="runners.html">Start here!</a></li> </ul> </div> 

Answer 1

您可以通过更改JS中的backgroundPostionX和backgroundPostionY值来为子画面设置动画。

在您的JS中，您还定义了按钮本身的事件处理程序，并调用move方法，但是未定义。

<div id="slider">
  <button id="leftArrow" onclick="move('left');" class="fbtnFirst"/button>
  <button id="rightArrow" onclick="move('right');" class="fbtnLast"/button>
</div>

<script>
// assuming the width of one portion of the sprite is 200px, this value will vary according to your size of the image
  $("#leftArrow").onclick(function(){
    $("#slider").css("backgroundPostionX","200px"); 
    $("#rightArrow").onclick(function(){
      ("#slider").css("backgroundPostionX","-200px");
    });
  });
</script>

希望这可以帮助