使用jquery手动预览幻灯片
请轻松 – 第一篇文章！
希望修改以下脚本： http ： //jonraasch.com/blog/a-simple-jquery-slideshow
喜欢它的简单性，试图找到一种方法来添加一个高级function
最好是在img或div-on点击或链接。
有什么建议？
感谢帮助
编辑 ，下面是脚本，这里是工作版本的链接：
链接到实时测试页面
脚本：
function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); 样式：
#slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; }
HTML：
我们可以通过将间隔更改为超时来做到这一点，这给了我们一个可以随意重置的ID。 然后我们可以使用点击甚至重置此间隔并手动前进，这反过来将再次启动间隔。
使用jonraasch.com上最简单的示例：
window.slideInterval = null; function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); window.slideInterval = setTimeout('slideSwitch()', 5000 ) } jQuery(function() { window.slideInterval = setTimeout('slideSwitch()', 5000 ); }); $(el).click(function(){ // reset interval clearTimeout(window.slideInterval); // trigger next slide manually slideSwitch(); });
编辑
在周末，我有时间对此进行更多关注，并且我阅读了制作jQuery插件的最佳实践。 代码略有文档记录，但总的来说还是相当标准而且不是很复杂，尽管有一些与变量相关的东西:)
如果您使用任何东西，您应该使用它。
http://jsfiddle.net/sg3s/RFJMy/214/
顺便说一句，你可以删除prev和rand函数，如果你不想使用它们，启动，停止，初始化和传输来完成整个工作。
该特定样本已具有内置的高级function： slideSwitch 。 在setInterval循环中调用此函数以推进幻灯片放映。 您需要做的就是将该方法与您的按钮单击挂钩，您应该很高兴。
HTML：
Click to Advance
JavaScript的
$(document).ready(function() { $('#advanceShow').click(function() { slideShow(); }); });