在jquery中滑動圖像效果

我想改變滑動圖像對下拉菜單選擇的影響？任何輸入？在jquery中滑動圖像效果

<html> 
<head> 
<title>jQuery Slideshow with Cycle plugin</title> 
<script type="text/javascript" src="jquery-1.4.min.js"></script> 
<script type="text/javascript" src="jquery.cycle.all.min.js"></script> 
<script type="text/javascript"> 


$(document).ready(function(){ 
    $('.content').cycle({ 
    fx: 'fade', 
    speed: 1000, 
    timeout: 2000 
    }); 
    $("#current").click(function(){ 
$("select[id$='current'] :selected").html(); 


    $('#content').cycle({ 
    fx: $(this).html(), 
    speed: 1000, 
    timeout: 2000 
    }); 
    }); 
}); 
</script> 
<style> 
body { 
    overlay: 0.7; 
    background: #CCCCCC; 
} 
#content img { 
    padding: 4px; 
    border: 1px solid #DDDDDD; 
    background: #FFFFFF; 
    width: 400px; 
    height: 300px; 
} 
#options { 
    padding: 4px; 
} 
.effect { 
    padding: 2px; 
    font-weight: bold; 
    cursor: pointer; 
} 
</style> 
</head> 
<body> 
<div align="center"> 
    <div class="content"> 
    <img src="hills.jpg" /> 
    <img src="lilies.jpg" /> 
    <img src="sunset.jpg" /> 
    <img src="winter.jpg" /> 
    </div> 
    <select id="current"> 
<option value="fade">Fade</option> 
<option value="fadeZoom">FadeZoom</option> 
<option value="cover">Cover</option> 
<option value="toss">Toss</option> 
<option value="blindY">BlindY</option> 
</select> 

</div> 

</body> 
</html>

來源

2011-07-15 rubyist

你想之前有人能回答你的問題 –

我加入，我需要在HTML上面的下拉menu..But它似乎並沒有被工作影響...... – rubyist

你可以對琴一看：

http://jsfiddle.net/qK7ds/

JS：

$(document).ready(function(){ 

    $("#current").bind('change', function(){ 
     var effect = $(this).val(); 
     alert(effect); 

     $('#content').cycle({ 
      fx: effect, 
      speed: 1000, 
      timeout: 2000 
     }); 
    }); 
});

來源

2011-07-15 11:50:58 ChristopheCVB

默認情況下，效果將是'淡入淡出'。所以我認爲當dom被加載的時候，我們應該指定...這樣做的效果很好..否則不會.. – rubyist

$（文檔）.ready（函數（）{ $（'。content'）。cycle （{ FX： '淡入'，速度：1000，超時：2000 }）; $（「＃電流」）綁定（ '變更'，函數（）{ 變種效果= $（本）。找到（ '選項：選擇'）;（ '內容'）。VAL（） $週期（{ FX：效果，速度：1000，超時：2000 }）; }）; }）; – rubyist

肯定，但像在小提琴中我沒有循環插件，我刪除了第一次發生，因爲它推動了一個錯誤... – ChristopheCVB

http://jquery.malsup.com/cycle/ 此頁中顯示的變化的影響的例子。

我現在明白了。你應該改變：

$("#current").click(function(){

到

$("#current").change(function(){

來源

2011-07-15 11:43:56 avall

我知道什麼效果效果可用於循環插件..我試圖測試這些效果。所以我用上面的下拉框創建了一個HTML頁面。但它不能正常工作...效果沒有發生......我只是在學習jquery ..所以試圖解決這個問題...任何投入在此將不勝感激 – rubyist

改變它到上面也沒有工作.. – rubyist

這工作:)

$(function(){ 

     var effect = ''; 

     $("#current").change(function(){ 
      effect = $(this).val(); 
     }); 

     $('.content').cycle({ 
      fx: effect, 
      speed: 1000, 
      timeout: 2000 
     }); 
    });

來源

2011-07-15 11:54:48

在jquery中滑動圖像效果

回答

相關問題