提前幻灯片手动与jQuery

请易 - 第一篇文章！提前幻灯片手动与jQuery

展望修改下面的脚本： http://jonraasch.com/blog/a-simple-jquery-slideshow

爱它的简单，试图找到一种方式来增加提前功能

最好的IMG或DIV - 上点击或链接。

有什么建议吗？

欣赏的帮助

编辑，下面是脚本，这里是一个工作版本的链接：

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>

来源

2011-09-30 jsheps

我们可以通过改变间隔超时，这给了我们，我们可以随意重置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/

顺便说一句，你可以删除分组和兰特的功能，如果你不想使用它们，启动，停止，init和运输，使整个工作。

来源

2011-09-30 20:52:31 sg3s

谢谢sg3s。我用上面的代码试过了jquery代码，它不会提前也不会循环播放幻灯片 – jsheps

尝试对它进行一些基本的调试。你可以看到更多的伪代码，你没有发布你现在使用的代码（html + images，css，javascript），所以我不能告诉你如何整合它。 – sg3s

易老虎！这是我第一次:)。我使用我正在使用的代码编辑了我的帖子。也许这将有助于？感谢您试用它！ – jsheps

特定的采样已经建成的一大进步功能：slideSwitch。该功能被称为在setInterval循环推进幻灯片放映。你所需要做的就是将该方法连接到你的按钮点击，你应该很好去。

HTML：

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

的JavaScript

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

来源

2011-09-30 20:44:26 JaredPar

由于贾里德。我已经尝试了这种方法，它似乎没有工作。它可能是幻灯片（）;这是造成一个问题？ – jsheps

@jsheps发生了什么事？是否出错，控制台是否打印任何内容？ – JaredPar

没有错误，似乎没有做任何事情。也许它错了？ – jsheps

提前幻灯片手动与jQuery

回答

相关问题