Question

请轻松 - 先发帖！

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

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

最好是在img或div-on点击或链接。

有什么建议吗？

感谢帮助

编辑，下面是脚本，这是指向工作版本的链接：

link to a live testing page

脚本：

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>

Answer 1

该特定样本已内置高级功能：slideSwitch。在setInterval循环中调用此函数以推进幻灯片放映。您需要做的就是将该方法与您点击按钮联系起来，您应该很高兴。

HTML：

<div id="advanceShow">Click to Advance</div>

的JavaScript

$(document).ready(function() {
  $('#advanceShow').click(function() {
    slideShow();
  });
});

Answer 2

我们可以通过将间隔更改为超时来完成此操作，这会给我们一个可以随意重置的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函数，启动，停止，初始化和传输以完成整个工作。

使用jquery手动预览幻灯片

2 个答案: