將鼠標懸停在div上時，帶有幻燈片的Jquery內容滑塊。 jquery Cycle

好的，我們走吧，這是我第一次在這裏問一個問題。到目前爲止，我在過去的幾年裏一直在閱讀並學到很多東西。將鼠標懸停在div上時，帶有幻燈片的Jquery內容滑塊。 jquery Cycle

反正這就是我要完成的：

我想有一個內容滑塊至極autoloops和淡入淡出。但也將其連接到同一頁上的不同div。

所以我一直在尋找很多不同的jQuery（內容）滑塊今天。並決定使用jquery循環插件。這幾乎可以像我想要的那樣工作。

但經過4個多小時的搜索網絡，並嘗試不同的解決方案，我想是時候承認我不會自己弄清楚這個問題了。

我卡在pageranchorbuilder，我該如何正確地做到這一點？或我從哪裏去？我希望這是不夠清楚......

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<style type="text/css"> 

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

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.80.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#slideshow').cycle({ 
     fx: 'fade', 
    speed: 2500 , 
     pager:  '#nav', 
     pagerEvent: 'mouseover', 
     allowPagerClickBubble: true, 
     pagerAnchorBuilder: function(i, el) { 
      return '<div style="float:left;height:200px;width:100px;"><a href="' + el.src + '"><img src="http://cloud.github.com/downloads/malsup/cycle/beach'+ (i+1) +'.jpg" width="100" height:"100"/></a></div>'; 
     } 
    }); 
}); 
</script> 
</head> 
<body> 

     <div id="slideshow" class="pics"> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" /> 
      <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" /> 
     </div> 


<div id="nav"></div> 
</body> 
</html>

來源

2012-03-13 needle

我想有一個內容滑塊至極autoloops和淡入淡出。但也將其連接到同一頁上的不同div。

您可以詳細瞭解您要完成的工作嗎？

來源

2012-03-13 16:50:20 Sethen

我很害怕這會發生，我只是不現在如何更詳細地解釋這一點，英語不是我的第一語言。 auto循環和漸變的東西是用循環插件完成的，在我的示例代碼中，pageranchorbuilder確實使我談論的其他div。它只是無法正常工作。 – needle 2012-03-13 17:20:14

我已經運行你的代碼。

我看到一貫

我嘗試使用週期腳本

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

的follwing版本懸停不工作，現在都能正常工作 - 希望你想要的方式。

我使用該腳本，因爲這是他們在jQuery循環演示頁上使用的。

我嘗試從下載頁面下載名爲：jquery.cycle.all.latest.min.js的腳本，它不起作用，所以不知道腳本中的差異是什麼。

來源

2012-03-30 11:59:25 Nat

thanx！我會測試你的建議。 – needle 2012-04-22 16:18:59

將鼠標懸停在div上時，帶有幻燈片的Jquery內容滑塊。 jquery Cycle

回答

相關問題