Вертикальный слайдер с динамическими размерами изображений

0

У меня есть бесконечный вертикальный слайдер с изображениями статического размера, который отлично работает

Fiddle Here: http://jsfiddle.net/kTLWx/1/

Однако следующий слайдер, который я должен создать разметку, немного отличается, и все изображения различаются по высоте. Im пытается динамически захватить высоту тегов и двигаться соответственно, но я пока не нашел рабочего решения.

Заметки
- Я НЕ МОГУ поменять разметку HTML (ее уродливый я знаю, но, к сожалению, я не могу ее изменить), я не могу добавлять классы или IDS
- Ширина изображения одинакова, только изменение высоты

HTML

<div class="contain">
<a href="#" id="up">Up</a>
<span>
    <span>
        <a style="height: 90px;"><img /></a>
        <a style="background-color:blue; height: 69px;"><img /></a>
        <a style="height: 45px;"><img /></a>
        <a style="background-color:blue; height: 87px;"><img /></a>
        <a style="height: 43px;"><img /></a>
        <a style="background-color:blue; height: 72px;"><img /></a>
    </span>
</span>
<a href="#" id="down">Down</a>
</div>

JQuery

$('.contain span > span a:first-of-type').before($('.contain span > span a:last-of-type'));

$('#up').click(function() {
    var a = $('.contain span > span a:first-of-type'); 
    var height = a.clientHeight;

    movement = parseInt($('.contain span > span').css('top')) + height;  

   $('.contain span > span:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > span a:first-of-type').before($('.contain span > span a:last-of-type'));
        $('.contain span > span').css({ 'top': height });
   });
});

$('#down').click(function() {
    var a = $('.contain span > span a:first-of-type'); 
    var height = a.clientHeight;

    movement = parseInt($('.contain span > span').css('top')) - height;  

   $('.contain span > span:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > span a:last-of-type').after($('.contain span > span a:first-of-type'));
        $('.contain span > span').css({ 'top': height });
   });
});

Неработающая скрипка: http://jsfiddle.net/RPeLK/2/

  • 0
    спасибо, очень конструктивно
  • 0
    Я имею в виду, вы должны быть в состоянии решить хотя бы эту проблему, верно ?!
Показать ещё 5 комментариев
Теги:
slider

1 ответ

1

Хорошо, думал, что буду работать над этим просто для удовольствия. Я не смог выполнить это, используя span для контейнера link. Это было странно. overflow:hidden, похоже, не очень хорошо работает на элементе span. Но он работал, когда менял его на div.

JQuery

$('.contain span > div a:first-of-type').before($('.contain span > div a:last-of-type'));
$('.contain span > div').css('top','-'+$('.contain span > div a:first-of-type').height()+'px');

$('#up').click(function() {
    var a = $('.contain span > div a:first-of-type'); 
    var height = a.height();
    movement = parseInt($('.contain span > div').css('top')) + height;     
   $('.contain span > div:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > div a:first-of-type').before($('.contain span > div a:last-of-type'));
        height = $('.contain span > div a:first-of-type').height();
        $('.contain span > div').css({ 'top': '-'+height+'px' });
   });
});

$('#down').click(function() {
    var a = $('.contain span > div a:nth-child(2)'); 
    var height = a.height();
    movement = parseInt($('.contain span > div').css('top')) - height;  
   $('.contain span > div:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > div a:last-of-type').after($('.contain span > div a:first-of-type'));
        height = $('.contain span > div a:first-of-type').height();
        $('.contain span > div').css({ 'top': '-'+height+'px' });
   });
});

HTML

<div class="contain">
<a href="#" id="up">Up</a>
<span>
    <div>
        <a style="height: 90px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 69px;"><img /></a>
        <a style="height: 45px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 87px;"><img /></a>
        <a style="height: 43px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 72px;"><img /></a>
    </div>
</span>
<a href="#" id="down">Down</a>
</div>

CSS

.contain span { 
    display: block;height: 150px; border: 1px solid #d8d8d8; width: 50px; 
    margin: 0 auto; overflow: hidden; position: relative;
}
.contain span > div { 
    list-style: none; margin: 0; padding: 0; position: relative; border:none; 
    /*top: -?px; Needs to be dynamic based on first img*/
}
.contain span > div a { width: 100%;}

a { display: block; width: 50px; margin: 0 auto; }

пример

http://jsfiddle.net/RPeLK/4/

Поделиться
  • 0
    @ user934902 Могу ли я получить отзыв о моем ответе? Или вы можете опубликовать свой ответ и пометить его как принятый? Спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню