使用jQuery手动推进幻灯片放映 [英] Advance slideshow manually with jquery

问题描述

请简单点-第一篇文章！

please be easy - first post!

要修改以下脚本: http://jonraasch.com/blog/a-simple-jquery-slideshow

喜欢它的简单性，试图找到一种添加高级功能的方法

Love it's simplicity, trying to find a way to add an advance function

最好在img或div上-单击或单击链接.

Preferably on the img or div - on click or from a link.

有什么建议吗?

感谢帮助

编辑，下面是脚本，这是工作版本的链接:

edit, below is the script and here is a link to a working version:

链接到实时测试页面

脚本:

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:

<div id="slideshow">
        <img src="image01.jpg" width="262" height="496" border="0" class="active" />
        <img src="image02.jpg" width="262" height="496" border="0" />
        </div>

推荐答案

我们可以通过将时间间隔更改为超时来完成此操作，这将为我们提供一个ID，我们可以随意重置该ID.然后我们甚至可以单击一下以重置此间隔并手动前进，这又会重新启动该间隔.

We could do this by changing the interval to a timeout, which gives us an id which we can reset at will. Then we can use a click even to reset this interval and advance manually, which in turn will start up the interval again.

使用 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插件的最佳实践.代码略有记载，但是总的来说是相当标准的，并且不是很复杂，尽管有很多变数:)

Over the weekend I had the time to put some more attention to this, and I read up on the best practices in making a jQuery plugin. Code is slightly documented, but all in all fairly standard and not very complex, though has a fair bit of juggling with variables :)

如果您使用任何东西，都应该使用它.

If you use anything you should use this.

http://jsfiddle.net/sg3s/RFJMy/214/

顺便说一句，如果您不想使用prev和rand函数，可以将它们删除，启动，停止，初始化和转换以完成整个工作.

btw, you can just delete the prev and rand functions if you don't want to use them, start, stop, init and transit to make the whole work.

这篇关于使用jQuery手动推进幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！