Sliding images effects in jquery
I want to change the effects of sliding images on selection of drop down menu?? Any inputs??
<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
开发者_如何学C });
});
});
</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>
You can have a look on that fiddle :
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
});
});
});
http://jquery.malsup.com/cycle/ This page shows you examples of change effects.
I get it now. You should change:
$("#current").click(function(){
to
$("#current").change(function(){
This works :)
$(function(){
var effect = '';
$("#current").change(function(){
effect = $(this).val();
});
$('.content').cycle({
fx: effect,
speed: 1000,
timeout: 2000
});
});
加载中,请稍侯......
精彩评论