我正在尝试创建一个 jQuery 滑动视频库，但它并没有达到我想要的效果。当我单击箭头按钮时，它不会滚动图像，而是根据方向向右/向左移动整个 div。
HTML：
<div id="videocontainer">
<a href="#" class="backward"><img src="images/backwards.png" width="30" height="27" /></a>
<div class="videogallery">
<ul>
<li><a href=""><img src="thumbnails.jpg" />video1<span></span></a></li>
<li><a href=""><img src="thumbnails.jpg" />video2<span></span></a></li>
<li><a href=""><img src="thumbnails.jpg" />vidoe3<span></span></a></li>
</ul>
</div>
<a href="#" class="forward"><img src="images/forward.png" width="30" height="27" /></a>
</div>
jQuery：
$(document).ready(function() {
$('.forward').click(function() {
$('.videogallery').animate({
marginLeft: "+=200"
}, "fast");
});
$('.backward').click(function() {
$('.videogallery').animate({
marginLeft: "-=200"
}, "fast");
});
});
CSS：
#videocontainer {
float:left;
width:100%;
height:160px;
}
.backward {
background-image:url(images/backward.png);
margin-top:50px;
float: left;
height: 100%;
}
.forward {
background-image:url(images/forward.png);
margin-top:-30px;
float: left;
height: 100%;
}
ul {
list-style-type: none;
height: 80px;
width: 100%;
margin: auto;
}
li {
float: left;
}
ul a {
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 30px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
}
.videogallery {
width:100%;
zoom:1;
}
.videogallery span{ display:block; }
.videogallery a{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
padding:5px;
width:180px;
border:solid 1px #b8b8b8;
background-color:#f4f5f5;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
}
现在我正在使用 videolightbox 来播放视频，但这可以找到并且应该是无关紧要的。基本上我想把它变成一个旋转木马，我确信它需要调整一些相当简单的东西，但我仍然是一个新手并且正在努力学习。