可点击幻灯片

时间:2012-11-30 19:18:11

标签: jquery slideshow clickable

我从这里开始......我正在尝试设置一个非常简单的可点击幻灯片放映,例如在此页面上使用,但是水平而不是垂直。

http://benhulse.com/Look-of-the-Games

我正在尝试使用此插件:

http://jquery.malsup.com/cycle/basic.html

他们的基本脚本是:

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>

我是一个jquery初学者,所以我不确定如何在脚本中实现以下默认选项:

prevNextEvent:'click.cycle',// event which drives the manual transition to the previous or next slide 

我不想要任何效果。

谢谢!

2 个答案:

答案 0 :(得分:0)

您需要水平滚动才能将fx设置为“scrollLeft”

$('#slideshow').cycle({ 
fx:      'scrollLeft', 
speedIn:  2000, 
speedOut: 500, 
easeIn:  'easeInCirc', 
easeOut: 'easeOutBounce', 
delay:   -2000 
});

由于

答案 1 :(得分:0)

要继续点击下一张幻灯片,您可以执行以下操作:

$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'scrollLeft' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
    $('.slideshow').cycle('pause');
    $(".slideshow").click(function() {
        $('.slideshow').cycle('next');
    });
});

http://jsfiddle.net/KKs2z/1/