jQuery动画幻灯片放映插件中的幻灯片放映。最后一张幻灯片获胜';不要回到第一个
我让一个人为我创建了一个jquery插件。基本上,它是5个不同的幻灯片在一个幻灯片放映。它很好用,除了一件事。一旦最后一张幻灯片结束,它就停止了。我需要它回到第一张幻灯片。有没有人能看看他的代码,看看他们是否能帮上忙?谢谢jQuery动画幻灯片放映插件中的幻灯片放映。最后一张幻灯片获胜';不要回到第一个,jquery,Jquery,我让一个人为我创建了一个jquery插件。基本上,它是5个不同的幻灯片在一个幻灯片放映。它很好用,除了一件事。一旦最后一张幻灯片结束,它就停止了。我需要它回到第一张幻灯片。有没有人能看看他的代码,看看他们是否能帮上忙?谢谢 <div id="slides"> <div class="slider" id="category0"> <a class="button prev" h
<div id="slides">
<div class="slider" id="category0">
<a class="button prev" href="#" rel="nofollow"><img src="images/slidePrev.png"/></a>
<a class="button next" href="#" rel="nofollow"><img src="images/slideNext.png"/></a>
<div class="holder_cont">
<ul class="holder">
<li class="slide first">
</li>
<li class="slide">
</li>
<li class="slide">
</li>
<li class="slide">
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<script>
;(function($) {
$.preloadImages = function(images, func) {
var i = 0;
var cache = [];
var loaded = 0;
var num = images.length;
for ( ; i < num; i++ ) (function(i) {
var new_image = $('<img/>').attr('src', images[i]).load(function(){
loaded++;
if(loaded == num)
{
func();
}
});
cache.push(new_image);
})(i);
return true;
};
$.fn.imgSlider = function(images) {
if (!$(this).length || $(this).length>1) {
return this;
}
var direction = 'right';
var e = this;
var timeout_id = 0;
var in_progress = false
var i = 0;
var num_slides = $(e).find('.holder > li').length;
var slide_widths = $(e).find('.holder > li:first').width();
var speed = 900;
var current=0;
for ( ; i < num_slides; i++ ) (function(i) {
$(e).find('.holder > li').eq(i).css('background', 'url('+images[i]+') no-repeat');
})(i);
function slider_animate(to)
{
clearTimeout(timeout_id);
timeout_id = setTimeout(auto_animate, 5000);
in_progress = true;
var toMove = $(e).find('.holder');
current = to;
$(toMove).animate({'margin-left':'-'+(slide_widths*to)+'px'}, speed, null, function(){
in_progress = false;
});
}
$(e).find('.holder > li').hover(function(){
clearTimeout(timeout_id);
$(this).find('.caption').stop().fadeTo(500, 0.8);
},function(){
$(this).find('.caption').stop().fadeTo(500, 0);
timeout_id = setTimeout(auto_animate, 3500);
});
function auto_animate()
{
if (current === num_slides-1) {
var foo = $('.slider:not(.hidden)').attr('id');
if ( $(e).attr('id') === foo) {
if ($('#category'+(parseInt(foo.slice(8))+1)).length) {
window.startSlider( parseInt(foo.slice(8))+1 );
}
}
}
if(direction == 'right')
{
var to = current+1;
if(to<num_slides)
{
slider_animate(to);
}
}
else
{
var to = current-1;
if(to>=0)
{
slider_animate(to);
}
else
{
var foo = $('.slider:not(.hidden)').attr('id');
if ( $(e).attr('id') === foo) {
if ($('#category'+parseInt(foo.slice(8))+1).length) {
window.startSlider( parseInt(foo.slice(8))+1 );
}
}
}
}
}
$(e).find('.next').live('click', function(){
if(!in_progress)
{
var to = current+1;
if (current === num_slides-1) {
var foo = $('.slider:not(.hidden)').attr('id');
if ( $(e).attr('id') === foo) {
var bar = '#category' + (parseInt(foo.slice(8))+1);
if ($(bar).length) {
window.startSlider( parseInt(foo.slice(8))+1 );
}
}
}
if(to<num_slides)
{
slider_animate(to);
}
else
{
slider_animate(0);
}
}
return false;
});
$(e).find('.prev').live('click', function(){
if(!in_progress)
{
var to = current-1;
if (current === num_slides-1) {
var foo = $('.slider:not(.hidden)').attr('id');
if ( $(e).attr('id') === foo) {
if ($('#category'+parseInt(foo.slice(8))+1).length) {
window.startSlider( parseInt(foo.slice(8))+1 );
}
}
}
if(to>=0)
{
slider_animate(to);
}
else
{
slider_animate(num_slides-1);
}
}
return false;
});
timeout_id = setTimeout(auto_animate, 3000);
return true;
};
})(jQuery);
</script>
-
-
-
-
;(函数($){
$.PRELOIMAGES=函数(图像,函数){
var i=0;
var缓存=[];
var=0;
var num=images.length;
对于(;ili').length;
var slide_widths=$(e).find('.holder>li:first').width();
无功转速=900;
无功电流=0;
对于(;ili').eq(i).css('background','url('+images[i]+'))no repeat');
})(i) );
功能滑块\u动画(到)
{
clearTimeout(超时\u id);
timeout\u id=setTimeout(自动设置动画,5000);
进行中=正确;
var toMove=$(e).find('.holder');
电流=至;
$(toMove).animate({'margin-left':'-'+(slide_widths*to)+'px'},速度,null,函数(){
进行中=错误;
});
}
$(e).find('.holder>li').hover(函数(){
clearTimeout(超时\u id);
$(this.find('.caption').stop().fadeTo(500,0.8);
},函数(){
$(this.find('.caption').stop().fadeTo(500,0);
timeout\u id=设置超时(自动设置动画,3500);
});
函数auto_animate()
{
如果(当前===num_-1){
var foo=$('.slider:not(.hidden').attr('id');
if($(e).attr('id')==foo){
if($('#category'+(parseInt(foo.slice(8))+1)).length){
window.startSlider(parseInt(foo.slice(8))+1);
}
}
}
如果(方向=‘右’)
{
var to=电流+1;
如果(to=0)
{
滑块_设置动画(到);
}
其他的
{
var foo=$('.slider:not(.hidden').attr('id');
if($(e).attr('id')==foo){
if($(“#category”+parseInt(foo.slice(8))+1.length){
window.startSlider(parseInt(foo.slice(8))+1);
}
}
}
}
}
$(e).find('.next').live('click',function()){
如果(!正在进行)
{
var to=电流+1;
如果(当前===num_-1){
var foo=$('.slider:not(.hidden').attr('id');
if($(e).attr('id')==foo){
var-bar='#category'+(parseInt(foo.slice(8))+1);
如果($(bar).length){
window.startSlider(parseInt(foo.slice(8))+1);
}
}
}
如果(to=0)
{
滑块_设置动画(到);
}
其他的
{
滑块动画(num\u slides-1);
}
}
返回false;
});
timeout\u id=setTimeout(自动设置动画,3000);
返回true;
};
})(jQuery);
我认为将:$.fn.imgSlider>函数auto_animate()>if(direction=='right'){}
中的代码更改为以下可能会有所帮助:
var to = current+1;
if(to<num_slides){
slider_animate(to);
}
else{
slider_animate(0);
}
var to=current+1;
if(to未测试,但似乎需要在if(…){window.startSlider}
部分中进行更改。例如:
if (...) {
window.startSlider(...);
} else {
window.startSlider(0);
}
如果未执行if
语句,则幻灯片放映将停止;如果执行,则将转到下一个幻灯片放映。因此,当没有更多幻灯片放映时,应执行else
,并重新开始
我可能是看错了;如果没有一个有效的例子,很难判断(这是好事)。希望这有帮助=^。^=这只会导致它返回到最后一张幻灯片的第一张幻灯片。它需要返回到第一张幻灯片。