#jquery #slideshow #slide
#jquery #слайд-шоу #слайд
Вопрос:
Я динамически создавал обзоры внутри таблиц с классом ‘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%">amp;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">amp;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-GDM49amp;amp;ID=12amp;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-GDM49amp;amp;ID=12amp;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. Есть ли в вашем классе helpfulreviews что-нибудь важное? (Я возился с вашим кодом и хочу включить его, если это важно) Если да, можете ли вы опубликовать это, пожалуйста?
2. @Thomas-Shields Да, в моем классе helpfulreviews много чего есть внутри, я обновил приведенный выше код!
3. Кстати, отличный вопрос. Наконец-то получил свой ответ и многому научился при его создании. Спасибо!
Ответ №1:
Извините за задержку. Вот рабочий пример. Очевидно, что вы можете настроить размеры и прочее в соответствии с вашими целями. Идея состоит в том, чтобы обернуть таблицы в 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>
РЕДАКТИРОВАТЬ: Я изменил код, чтобы динамически изменять таблицы, значения и прочее на основе определения нескольких переменных; таким образом, вам не нужно проходить и изменять кучу значений каждый раз, когда вы меняете размер своих обзоров.
Комментарии:
1. ОЧЕНЬ ПРИЯТНО. Я пытаюсь заставить его правильно работать с тем, что у меня есть ЗДЕСЬ . Таблицы будут создаваться динамически, поэтому я не могу указать, сколько там будет таблиц. Вы увидите отзывы с правой стороны.
2. О, если подумать, вам не нужно указывать количество таблиц… пока у них есть
.helpfulreviewsкласс, я должен иметь возможность подсчитывать их из jQuery. Есть. Обновлено — надеюсь, это поможет.3. потрясающе, могу ли я заставить его двигаться снизу вверх, а не справа налево?
4. Да, заменив левое поле на верхнее. Одна минута, и я обновлю его.
5. Черт возьми, это сложнее, чем я думал. Проблема в том, что
tables являются блочными элементами и, следовательно, создают свой собственный перенос строки, поэтому с ними сложно работать с верхним пределом.