我有一个包含 4 张不同图片的 Sprite 图像。它们的高度为 520px。单击左箭头或右箭头时，我想通过它们设置动画。我不确定为什么它不起作用。
修改并添加了 css。仍然无法正常工作。
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li><a href="http://itweb.fvtc.edu/200158947/Assign3/runners3.html">Start here!</a></li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","600px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-600px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.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;
最佳答案
像这样的东西应该可以工作，但我不知道你的 css 文件里有什么，我的意思是你如何定义你的箭头
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});<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" class="fbtnFirst"></button>
<button id="rightArrow" class="fbtnLast"></button>
</div>
</div>
<div id="startApp">
<ul>
<li>
<a href="http://itweb.fvtc.edu/200158947/Assign3/runners3.html">Start here!</a>
</li>
</ul>
</div>关于javascript - JQuery/CSS 动画 Sprite ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49822162/