使用下一个上一个jquery进行幻灯片放映

我正试图用jquery的下一个上一个按钮进行幻灯片放映，我接着说 然后我尝试从

img

更改为div，但没有成功，下面是我的代码：

<% _.each(items, function(item) {
  if (i < 10){ i++; } else { return false; } %>
     <div class="divRecentItem">
            <div style="height:90px; overflow: hidden; text-align: center;">
                <a href="#itemDetail/<%=item.ID%>">
                    <img src="<%=item.PictureName%>" alt="Item" width="60px">
                </a>
            </div>
            <div style="text-align: center">
                <a href="<%=item.ID%>"><%=item.Name%></a>
            </div>
            <div style="text-align: center">
                <%=item.PriceShow%>
            </div>
        </div>
<% }); %>
 <img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/>
 <img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>


 $('.divRecentItem .divRecentItem:gt(0)').hide();

 $('.next').click(function() {
     $('.divRecentItem .divRecentItem:first-child').fadeOut().next().fadeIn().end().appendTo('.divRecentItem');
 });

 $('.prev').click(function() {
     $('.divRecentItem .divRecentItem:first-child').fadeOut();
     $('.divRecentItem .divRecentItem:last-child').prependTo('.divRecentItem').fadeOut();
     $('.divRecentItem .divRecentItem:first-child').fadeIn();
 });

$（'.divRecentItem.divRecentItem:gt（0）'）.hide（）；
$（'.next'）。单击（函数（）{
$（'.divRecentItem.divRecentItem:first child'）.fadeOut（）.next（）.fadeIn（）.end（）.appendTo（'.divRecentItem'）；
});
$（'.prev'）。单击（函数（）{
$（'.divRecentItem.divRecentItem:first child'）.fadeOut（）；
$（'.divRecentItem.divRecentItem:last child'）.prependTo（'.divRecentItem'）.fadeOut（）；
$（'.divRecentItem.divRecentItem:first child'）.fadeIn（）；
});

我想我明白了

相关JS

$('.img-wrap img:gt(0)').hide();
$('.footertext span:gt(0)').hide();
$('.footerprice span:gt(0)').hide();

$('.next').click(function () {
   $('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');
   $('.footertext span:first-child').hide().next().show().end().appendTo('.footertext');
   $('.footerprice span:first-child').hide().next().show().end().appendTo('.footerprice');
});

$('.prev').click(function () {
    $('.img-wrap img:first-child').fadeOut();
    $('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
    $('.img-wrap img:first-child').fadeIn();

    $('.footertext span:first-child').hide();
    $('.footertext span:last-child').prependTo('.footertext').hide();
    $('.footertext span:first-child').show();

    $('.footerprice span:first-child').hide();
    $('.footerprice span:last-child').prependTo('.footerprice').hide();
    $('.footerprice span:first-child').show();

});

无论如何它都不是完美的，但至少它会给你一个开始

对我来说，“教学点”或“尤里卡”时刻是意识到所有的图像/文本都在一个div中并保存在一个div中——只是不同程度地隐藏（淡出为img）和显示（淡出为img）

---

这是一次很好的锻炼，我学到了很多。谢谢你的提问

该示例将HTML显示为一个div，其中包含一系列图像。你们有相同的结构吗？小提琴可能很好，这样我们就可以看到错误在哪里。@TimSPQR这是我没有放弃的小提琴。这里有一个更新--我正在研究如何循环标题。难，好的。让文本向前移动。现在，我们将反向工作。对于文本，我从fadeIn/fadeout切换到hide/show，效果很好。非常感谢TimSPQR指出这一点。它工作得很好，但是应该从

img

更改为

a

（对于我的代码：）