jQuery Слайд-шоу обзоров, если класс существует - PullRequest
Новая
       34

jQuery Слайд-шоу обзоров, если класс существует

1 голос
/ 29 апреля 2011

У меня динамически создаются Обзоры внутри таблиц с классом «Полезные обзоры».Я хочу взять эти таблицы и, по сути, скрыть все, кроме одной, и автоматически перейти к следующей таблице через определенный промежуток времени, используя 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>

1 Ответ

1 голос
/ 29 апреля 2011

Извините за задержку. Вот рабочий пример. Очевидно, вы можете настроить размеры и прочее в соответствии с вашими целями. Идея состоит в том, чтобы обернуть таблицы в контейнер div с помощью overflow:hidden и сместить их по мере необходимости (т. Е. Первая таблица расположена для заполнения элемента div, вторая имеет margin-left, равную ширине контейнера, поле третьего поля осталось в два раза больше ширины и т. д.) 

 <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>

РЕДАКТИРОВАТЬ: я изменил код для динамического изменения таблиц и значений и прочее на основе определения нескольких переменных; таким образом, вам не нужно проходить и менять кучу значений каждый раз, когда вы меняете размер ваших обзоров.

...