jQuery Cycle-如何根據當前幻燈片索引對尋呼機進行動畫

下面是我擁有的： 我在頁面上有5張滑動照片，滑動照片下面有1-5個尋呼機。我想一次只顯示3個尋呼機，所以第4個和第5個尋呼機現在隱藏。您可以點擊「下一步」按鈕來激活包含尋呼機的div以顯示第4和第5，點擊「上一步」按鈕，然後返回顯示第1-3個尋呼機。jQuery Cycle-如何根據當前幻燈片索引對尋呼機進行動畫

這裏就是我想達到但不知道怎麼... 如何使一個包含所有尋呼機向左移動，顯示第四和第五尋呼機div時幻燈片播放幻燈片4照片??當幻燈片播放到第4張照片時，意味着如何讓該div移動，就像我點擊「下一步」按鈕一樣？（當幻燈片返回到第一張照片時，尋呼機應該再次移動，以便再次顯示第1-3頁的尋呼機。）

我不知道腳本的哪個部分可以讓我知道當前哪張幻燈片活性。如果我知道，我想我可以觸發div的動畫時，4個有效...

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Cycle Test</title> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#slideshow').cycle({ 
     fx:  'turnDown', 
     speed: 'fast', 
     pager: '#nav', 
     pagerAnchorBuilder: function(idx, slide) { 
      // return sel string for existing anchor 
      return '#nav li:eq(' + (idx) + ') a'; 
     } 
    }); 
}); 

</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#next_control').click(function() { 
     var c = $('#nav_content'); 
     var pos = c.position(); 
     var w = c.width(); 
     var status = w + pos.left; 
     var dif = w - 190; 
     var x = w + dif; 
     if (status > 190) { 
      c.stop().animate({ 
       left: pos.left - 180 
      }, 500) 
     }; 
    }); 
}); 

$(document).ready(function() { 
    $('#prev_control').click(function() { 
     var c = $('#nav_content'); 
     var pos = c.position(); 
     if (pos.left < 0) { 
      c.stop().animate({ 
       left: pos.left + 180 
      }, 500) 
     }; 
    }); 
}); 
</script> 
<style type="text/css"> 
<!-- 

* { 
    margin: 0px; 
    padding: 0px; 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
} 
#slideshow { 
    overflow: hidden; 
    position: relative; 
    height: 200px; 
    width: 200px; 
} 
#bot { 
    background-color: #CCC; 
    height: 50px; 
    width: 290px; 
    margin-top: 10px; 
    position: relative; 
} 
#nav_content #nav li { 
    list-style-type: none; 
    float: left; 
    height:50px; 
    width: 50px; 
    margin-left: 10px; 
} 


#bot #nav_wrapper { 
    background-color: #FFF; 
    float: left; 
    height: 50px; 
    width: 190px; 
    overflow: hidden; 
    position: relative; 
} 
#bot #previous { 
    float: left; 
    height: 50px; 
    width: 50px; 
} 
#bot #next { 
    float: right; 
    height: 50px; 
    width: 50px; 
} 
#bot #nav_wrapper #nav_content { 
    height: 50px; 
    width: 310px; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
--> 
</style> 
</head> 

<body> 
<div id="slideshow"> 
<img src="img/beach1.jpg" /> 
<img src="img/beach2.jpg" /> 
<img src="img/beach3.jpg" /> 
<img src="img/beach4.jpg" /> 
<img src="img/beach5.jpg" /> 
</div> 

<div id="bot"> 
<div id="previous"><a id="prev_control" href="#">Prev</a></div> 
<div id="nav_wrapper"> 
<div id="nav_content"> 
    <ul id="nav"> 
     <li><a href="#"><img src="img/beach1.jpg" width="50" height="50" /></a></li> 
     <li><a href="#"><img src="img/beach2.jpg" width="50" height="50" /></a></li> 
     <li><a href="#"><img src="img/beach3.jpg" width="50" height="50" /></a></li> 
     <li><a href="#"><img src="img/beach4.jpg" width="50" height="50" /></a></li> 
     <li><a href="#"><img src="img/beach5.jpg" width="50" height="50" /></a></li> 
    </ul> 
</div> 
</div> 
<div id="next"><a id="next_control" href="#">Next</a></div> 
</div> 
</body> 
</html>

來源

2011-11-26 Newcomer

從jQuery Cycle插件網站：

當使用傳呼機選項，genrated導航元素只是簡單的錨。所以，如果你設置尋呼機選項，如下所示：呼叫器：「#nav」你可以風格錨像這樣：

#nav a { background-color: #fc0 }

此外，活動幻燈片的導航元素被賦予類activeSlide所以它可以風格獨特。

例子中的尋呼機以上是風格這樣的：

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; } 
#nav a.activeSlide { background: #ea0 } 
#nav a:focus { outline: none; }

來源

2011-11-26 12:27:29

jQuery Cycle-如何根據當前幻燈片索引對尋呼機進行動畫

回答

相關問題