jQuery Slider溢出可见性

Question

我有一个jQuery滑块，可以显示＆＃39;用户卡＆＃39; - 当前实现有一个水平可拖动滚动条，显示包含所有用户卡的div的整个宽度。我想要的是一个div，允许用户看到前一张卡片的一部分和下一张卡片的相同部分（见图片附件）滑动时，跳转动画将显示所需的卡片与下一张卡片相同的部分和以前的卡 - 我可以处理动画，但我很难知道如何实现附加图像的视觉效果。任何帮助将不胜感激。

Answer 1

我刚刚为该部分做了一个小提琴，允许用户看到前一张卡的一部分和下一张卡的相同部分，你可以添加滑块和动画逻辑，

http://jsfiddle.net/q4Yjh/

HTML

<div id="slider">
<div id="vcards">
    <div class="vcard">1</div>
    <div class="vcard">2</div>
    <div class="vcard">3</div>
    <div class="vcard">4</div>
    <div class="vcard">5</div>
</div>
</div>
<div id="next">Next</div>

CSS

#slider{
width:200px;
overflow:hidden;//remove overflow to see the actual logic
position:relative;
border:1px solid black;
height:100px;
}  

.vcard{
width:100px;
margin: 0 10px;
background-color:red;
height:100px;
float:left;
border:1px solid yellow;
}  

#vcards{
position:absolute;
top:0;
left:40px;
} 

JQUERY

$('#vcards').width(function(){
    var width = 0;                
    $('.vcard').each(function(){
        width += $(this).outerWidth(true);
    });
    return width;
}());
//set the width to contain all vcards 
//in a single horizontal strip
$('#next').on('click',function(){
    $('#vcards').animate({left : "-=122"});
    });

Answer 2

持有“卡片”的内容元素（div或其他）将足够宽以容纳所有卡片元素。视口将是固定宽度。 content元素将嵌套在viewport元素中，并且会响应某种后退/前进按钮元素而进行绝对定位更改。

有许多jquery插件可以执行此类操作，包括具有可滚动插件的优秀jquery工具库。

Answer 3

您需要使用某种滑块，如jquery循环。然后你需要构建包含这些元素的div并隐藏任何多余的元素。这将允许您仅显示部分卡，因为溢出是隐藏的。

<div class="wrapper" style="width:1200px; overflow: hidden">
  <div class="slider">
    <img class="img-1" src="" />
  </div>

  <div class="slider">
    <img class="img-2" src="" />
  </div>
</div>