Question

我正在尝试使用jquery以下一个上一个按钮进行幻灯片放映，我跟着this sample 然后我尝试从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();
 });

Answer 1

我想我明白了。

FIDDLE

相关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的淡出）和显示（fadein for img）

这是一项很好的练习 - 我学到了很多东西。谢谢你的问题！

SlideShow与下一个前一个jquery

1 个答案: