如果类存在则评论的 jQuery 幻灯片

Question

我在表格内动态创建了带有“helpfulreviews”类的评论。我想获取这些表格，并基本上隐藏除其中一个之外的所有表格，并在一段时间后使用 jQuery 自动滑入下一个表格

，这是三个评论，我希望一个显示并在大约 10 秒后滑入另一个表格，然后滑入第三篇评论，然后旋转回到开头。我简化了示例：

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews">
  <tbody>
     <tr> 
        <td>MY FIRST REVIEW GOES HERE<br>Terrible Product</td>
     </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews">
  <tbody>
     <tr> 
        <td>MY SECOND REVIEW GOES HERE<br>Great Product you have here</td>
     </tr>
  </tbody>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews">
  <tbody>
     <tr> 
        <td>MY THIRD REVIEW GOES HERE<br>This is an awesome product</td>
     </tr>
  </tbody>
</table>

其中一个表的完整代码：

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="helpfulreviews">
        <tbody><tr> 
          <td width="1%">&nbsp;</td>
          <td width="99%"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="colors_descriptionbox">
              <tbody><tr> 
                <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/RBox_Border_Left_Top.gif"></td>
                <td width="100%" valign="top" background="/v/vspfiles/templates/90/images/DBox_Border_Top.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td>
                <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/DBox_Border_Right_Top.gif"></td>
              </tr>
              <tr> 
                <td width="1px" background="/v/vspfiles/templates/90/images/DBox_Border_Left.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td>
                <td width="100%" valign="top"> 
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tbody><tr> 
                      <td><b><img src="/v/vspfiles/templates/90/images/star5.gif"><br> 
                        Great Product</b> </td>
                      <td align="right"><i>April 28, 2011</i></td>
                    </tr>
                    <tr> 
                      <td><i><span class="PageText_L510n">Reviewer</span>: 
                        <span class="PageText_L512n">Anonymous Person</span>

                        </i><br><br></td>
                      <td align="right">&nbsp;</td>
                    </tr>
                  </tbody></table>
                  I used this product and it was great<br>
                  <br>
                  <span class="PageText_L514n"><span id="helpful"></span></span> <a href="/reviewhelpful.asp?ProductCode=TRU%2DGDM49&amp;ID=12&amp;yes=yes"><img src="/v/vspfiles/templates/90/images/buttons/btn_reviews_yes.gif" align="absmiddle" border="0"></a> 
                  <a href="/reviewhelpful.asp?ProductCode=TRU%2DGDM49&amp;ID=12&amp;yes=no"><img src="/v/vspfiles/templates/90/images/buttons/btn_reviews_no.gif" align="absmiddle" border="0"></a> 

                </td>
                <td width="1px" background="/v/vspfiles/templates/90/images/DBox_Border_Right.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td>
              </tr><tr> 
                <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/DBox_Border_Left_Bottom.gif"></td>
                <td width="100%" valign="top" background="/v/vspfiles/templates/90/images/DBox_Border_Bottom.gif"><img src="/v/vspfiles/templates/90/images/clear1x1.gif" width="1" height="1"></td>
                <td width="1px" valign="top"><img src="/v/vspfiles/templates/90/images/DBox_Border_Right_Bottom.gif"></td>
              </tr>
            </tbody></table>
          </td>
        </tr>
      </tbody></table>  

Answer 1

抱歉耽搁了。这是一个工作示例。显然，您可以调整尺寸和内容来满足您的目的。这个想法是用 overflow:hidden 将表格包装在容器 div 中，并根据需要偏移它们（即，第一个表格定位为填充 div，第二个表格具有 margin-left< /code> 等于容器的宽度，第三个左边距是宽度的两倍，等等）

 <style type="text/css">
 .helpfulreviews
 {
     width:100%;
     height:100%;
       position:absolute; 
 }
 </style>
 <div style="width:400px; height:50px; overflow:hidden; position:relative;" id="sliderContain">
 <table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews">
   <tbody>
        <tr>
                 <td>MY FIRST REVIEW GOES HERE<br>Terrible Product</td>
                      </tr>
                        </tbody></table>
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews" >  
                        <tbody>  
                           <tr>     
                               <td>MY SECOND REVIEW GOES HERE<br>Great Product you have here</td>   
                                 </tr> 
                                  </tbody></table>
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" class="helpfulreviews" >  <tbody>     <tr>         <td>MY THIRD REVIEW GOES HERE<br>This is an awesome product</td>     </tr>  </tbody></table>
 </div>
 <script type="text/ecmascript">
     $(document).ready(function () {
         var w = 300; //set your width here
         var h = 50; //set your height here
         var d = 3000;  //set your delay here
         var n = $(".helpfulreviews").length;
         if(n>1){
          var t = window.setTimeout(slideTable, d);
          $("#sliderContain").css("width", w + "px");
          $("#sliderContain").css("height", h + "px");
          var i = h;
          $(".helpfulreviews").each(function (index) {
              i = h * index;
              $(this).css("top", i + "px");
          });
         }
         function slideTable() {
             $(".helpfulreviews").each(function (index) {
                 if ($(this).css("top") == (1 - n) * h + "px") { //checks if we need to cycle them around
                     $(this).css("top", h + "px");
                 }
             });
             var a2l = "-=" + h + "px";
             $(".helpfulreviews").animate({
                 top: a2l
             }, 300, function () {
                 slideTable();
             }).delay(d);
         };
     });
 </script>

编辑：我更改了代码以基于定义一些变量来动态更改表和值以及内容；这样，您就不必在每次更改评论的大小时都经历并更改一堆值。