У меня есть круговая карусель jquery, представляющая календарь на 9 дней с видимыми 5 днями. Каждый день представлен в вертикальной колонке. Стрелки вправо и влево контролируют вид на 5 дней. Карусель прекрасно работает во всех браузерах, за одним исключением. Как только вы переходите от столбца 9 к столбцу 1 (круговым способом), стилизация исчезает, а мои эффекты наведения исчезают. Если вы продолжите в том же направлении, столбцы будут отсутствовать, пока вы не вернетесь к column1 снова. Например, если вы нажимали следующую кнопку несколько раз после перехода из столбца / дня9 в столбец / день1, стили наведения мыши больше не будут работать в те дни, пока вы снова не достигнете столбца / дня1.
Длинный код - соз.
Я использую msCarousel отсюда: http://www.marghoobsuleman.com/jquery-ms-carousel
Jquery
$('p.testSpotImage').wrap('<div class="imageWrapper" />');
$('.imageWrapper').append('<div class="imageBackground"></div>');
// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('.imageWrapper').each(function () {
var tdHeight = $(this).closest('td').height();
$(this).height(tdHeight);
});
$('.imageWrapper').css("width", "187px");
$('.imageWrapper').css("position", "relative");
$('.imageWrapper').css("top", "0");
$('.imageWrapper').css("clear", "both");
$('.imageWrapper').css("overflow", "hidden");
$('.imageBackground').css({ 'opacity': '0' });
$('.imageBackground').css("background-color", "#a43802");
$('.imageBackground').css("height", "100%");
$('.imageBackground').css("width", "100%");
$('.imageBackground').css("position", "absolute");
$('.imageBackground').css("top", "0");
$('.imageBackground').css("z-index", "1");
$('p.testSpotImage span.dayContentTitle').css({ 'opacity': '0' });
$('.imageWrapper').hover(
function () {
$(this).find('.imageBackground').stop().fadeTo(200, 1);
$(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 1);
$('p.testSpot a .dayContentDay', this).css("color", "#fff");
$('p.testSpot a', this).css("color", "#fff");
},
function () {
$(this).find('.imageBackground').stop().fadeTo(200, 0);
$(this).find('p.testSpotImage span.dayContentTitle').stop().fadeTo(200, 0);
$('p.testSpot a .dayContentDay', this).css("color", "#333");
$('p.testSpot a', this).css("color", "#333");
});
$('.dayContent').hover(
function () {
$(this).stop().animate({ backgroundColor: "#a43802" }, 200);
$('p.testSpot a .dayContentDay', this).css("color", "#fff");
$('p.testSpot a', this).css("color", "#fff");
},
function () {
$(this).stop().animate({ backgroundColor: '#ffffff' }, 200);
$('p.testSpot a .dayContentDay', this).css("color", "#333");
$('p.testSpot a', this).css("color", "#333");
});
HTML ОТ ОДНОЙ КОЛОННЫ
<div class="contentColumnDay2">
<table cellpadding="0" cellspacing="0" id="columnDay2">
<tr>
<td class="calendarHeader">
<p><span class="dayHeader">Day 2</span><br />October 1, 2011</p>
</td>
</tr>
<span id="ContentPlaceHolder1_labelDay2">
<tr>
<td class='dayContentImage' height='174' Width='187' BACKGROUND='/Images/day3_3pm.jpg'>
<p class='testSpotImage'>
<a href='CalendarMiniDetail.aspx?id=36' rel='shadowbox;height=220;width=330'>
<span class='dayContentImageDay'>10</span>AM<br><span class='dayContentTitle'>Fashion Show Debut</span>
</a>
</p>
</td>
</tr>
</span>
</table>
</div>