Question

我想在选择下拉菜单时更改滑动图像的效果？任何输入??

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

Answer 1

http://jquery.malsup.com/cycle/ 此页面显示了更改效果的示例。

我现在明白了。你应该改变：

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

到

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

Answer 2

你可以看看那个小提琴：

http://jsfiddle.net/qK7ds/

IS：

$(document).ready(function(){

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

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

Answer 3

这有效：）

$(function(){  

        var effect = '';

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

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

在jquery中滑动图像效果

3 个答案: