Question

当我使用JQuery制作自定义图片幻灯片时，图片显示在定义的区域/ div之外。我希望div-tag中的当前图片向下滑动并退出div-tag，新图片从右侧滑入。我希望所有动作都发生在div-tag中。就像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">

使用内联样式也不是最佳实践，请查看外部样式表：）

JQuery循环幻灯片重叠

1 个答案: