JQuery循环幻灯片重叠

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

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>

    <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>

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>

    <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>

---

您需要将溢出设置为在父元素上隐藏。例如：

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

使用内联样式也不是最佳做法，请查看外部样式表：