具有动态大小图像的垂直滑块

Vertical Slider with dynamic sized images

本文关键字：垂直 图像 动态      更新时间：2024-03-16

我有一个无限的垂直滑块，带有静态大小的图像，可以完美地进行

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

然而，我必须创建标记的下一个滑块有点不同，所有图像的高度都不同。我试图动态地获取标签的高度并相应地移动，但我似乎还没有找到一个有效的解决方案。

备注
-我不能更改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/

我想我会做这件事只是为了好玩。对于link容器，我无法使用span来完成此操作。它的行为很奇怪。。overflow:hidden似乎在跨度元素上工作得不太好。但在将其更改为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/

相关文章：