JQuery 循环幻灯片重叠

Question

当我使用 JQuery 制作自定义图片幻灯片时，图片显示在定义的区域/div 之外。我希望 div-tag 中的当前图片向下滑动并滑出 div-tag，而新图片从右侧滑入。我希望所有操作都发生在 div 标签内。就像来自 malsup.com (http://jquery.malsup.com/cycle/adv.html) 的示例“s4”一样。我做了这个例子来说明问题:

html 的头部:

   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>

   <script type="text/javascript"> 
      $('.slideshow01').cycle({
          fx: 'custom',
          sync: 0,
          cssBefore: {
              top:  0,
              left: 250,
              display: 'block'
          },
          animIn:  {
              left: 0
          },
          animOut: {
              top: 188
          },
          delay: -1000,
          pause: 1
      });
   </script>

html 的正文部分:

    <div style="width:250px; height:188px; border:solid 10px #ffffff; ">
        <div class="slideshow01">
            <img src="img/001.gif" />
            <img src="img/002.gif" />
            <img src="img/003.gif" />
            <img src="img/004.gif" />
            <img src="img/005.gif" />
            <img src="img/006.gif" />
            <img src="img/007.gif" />
        </div>
    </div>

Answer 1

需要在父元素上设置溢出隐藏。例如:

    <div style="width:250px; height:188px; border:solid 10px #ffffff; overflow: hidden">

使用内联样式也不是最好的做法，看看外部样式表:)