JQuery Cycle幻燈片重疊

當我使用JQuery製作自定義圖片幻燈片時，圖片顯示在定義的區域/ div之外。我想讓div標籤中的當前圖片向下滑動，並從div標籤中滑出，並從右側滑入新圖片。我希望所有的動作發生在div標籤內。就像來自malsup.com的示例「s4」（http://jquery.malsup.com/cycle/adv.html）。我做了這個例子來說明這個問題：在HTML的JQuery Cycle幻燈片重疊

頭部分：

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

來源

2011-10-12 Thomas Thor Nielsen

您需要設置溢出是隱藏在父元素上。例如：

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

使用內嵌樣式是不是最好的做法，要麼，看看到外部樣式表:)

來源

2011-10-12 06:49:47

當然 - 簡單和容易 - 謝謝 –

JQuery Cycle幻燈片重疊

回答

相關問題