jquery - 可点击的幻灯片

Question

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

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 

我不想要任何效果。

谢谢！

Answer 1

您可以将水平滚动的要求设置为“scrollLeft”

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

谢谢

Answer 2

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

$(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/