我有一个名为rotatePics()的幻灯片,从页面加载开始。 我也有一些li ,当点击时,将获得该lirel值。 rel “的第li的比赛”了的id “预加载的幻灯片图像秒。 因此,当单击一个时,我想停止名为rotatePics的当前幻灯片放映功能并重新启动它但解析一个新的整数。

目前正在发生的事情是,我能够运行新的幻灯片放映功能,但不能替换页面加载时运行的幻灯片放映功能。

我需要停止rotatePics()并使用变量number重新启动它,只运行后一个函数。

$('a.main-img').click(function (e)
{
    e.preventDefault();

    var clickedLi = $(this).closest('li').attr('rel');

    var number = parseInt(clickedLi);

    rotatePics(number);

});

这是rotatePics()函数的代码

    function rotatePics(currentPhoto){

    var numberOfPhotos = $('#banner-holder img').length;

    currentPhoto = currentPhoto % numberOfPhotos;

    $('#banner-holder img').eq(currentPhoto).fadeOut(function (){
        $('#banner-holder img').each(function (i)
        {
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);
        });

        $(this).show();

        setTimeout(function ()
        {
            rotatePics(++currentPhoto); 
        }, 1000);
    });
};

我也知道模数部分改变整数,这最初只是一个滚动的幻灯片,没有选择新图像的选项。

===============>>#1 票数:1

您只需将setTimeout的返回值赋给变量,然后调用clearTimeout

var timerID;

// ...

timerID = setTimeout(function ()
{
    rotatePics(++currentPhoto); 
}, 1000);

// ...

clearTimeout(timerID);

===============>>#2 票数:1 已采纳

清除超时如下:

var rotatePicsTimer;
function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function (){ 
        $('#banner-holder img').each(function (i) 
        { 
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
        }); 

        $(this).show(); 

        rotatePicsTimer = setTimeout(function () 
        { 
            rotatePics(++currentPhoto);  
        }, 1000); 
    }); 
};

$('a.main-img').click(function (e)   
{   
    e.preventDefault();   

    var clickedLi = $(this).closest('li').attr('rel');   

    var number = parseInt(clickedLi);   

    clearTimeout(rotatePicsTimer);
    rotatePics(number);
});

  ask by Cecil Theodore translate from so

未解决问题?本站智能推荐:

2回复

使用Jquery或javascript将幻灯片功能添加到图库

我想实现的是一个触发切换的按钮,它将触发自动幻灯片显示。 就像播放/暂停按钮一样。 我正在使用来自html5up.net的图片库,模板位于此处: https://html5up.net/lens 当前单击时触发下一个图像: 在HTML中,图库将显示为原来的样子,单击拇
1回复

用户单击缩略图时切换图像

好了朋友们。 我希望当用户单击较小的缩略图时切换较大的显示图像。 这是我的jquery脚本,但到目前为止它没有切换。 单击缩略图没有任何反应。 这很奇怪,因为我有两个箭头图像,它们在单击时会在缩略图上滑动,但由于某种原因,在单击了拇指时就不会滑动。 到底是怎么回事? jQ
1回复

jQuery幻灯片-连续循环

我刚开始使用jQuery,然后开始使用可在此处找到的幻灯片库教程: http : //tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/ 最新版本的幻灯片显示添加了用于自动前进每张幻灯片的代码,但是到最后时,它“倒回”到第
1回复

jQuery Gallery +幻灯片

我正在尝试建立一个每4秒旋转一次图像的画廊。 除上述内容外,我还需要一个函数,以便单击缩略图时,该单击的图像将显示在“大图像”区域中。 这是我在做什么: 这是快速的HTML 问题问题是单击缩略图时自动旋转混乱了。 它会在主图像正下方开始另一个幻灯片放映。 如果再次单击,它
5回复

jQuery:每隔5秒,自动点击列表中的下一个图像?

我有一个给定的图像列表,以缩略图形式显示: 我使用jQuery,以便当用户点击图像时,它会替换div中的特色图像(我从另一个StackOverflow Ask中获取 ): 我的问题是:有没有办法让它成为幻灯片? 也许每5秒自动“点击”下一张图片? setInterval是否参
1回复

在jquery画廊的缩略图和大图之间切换?

我是一个初学者(对不起我的英语),我正在尝试为自己的网站构建一个基于jquery的照片库。 我真的很喜欢的一个功能就是这个(示例): http : //www.robindmoore.com/#!/index/G0000n_GEYuF3.rM/1 您有一个大的缩略图网格,当您单击其中
1回复

jQuery幻灯片库图像连续显示两次

我试图弄清楚为什么当我的jQuery幻灯片库在图像和标题之间循环时,第一遍信息(图像,标题)在整个循环中第一次连续两次出现。 随后的每个循环都会正确交替显示图像。 有任何想法吗? 谢谢,-qs
1回复

jQuery函数,用于最大化计时器上的内容

我正在做一个项目,该项目将作为功能的图像和文本的展示。 我的目标是使媒体在页面上以网格样式显示(即10x5磁贴) ,然后每隔5秒,使用灯箱式效果将随机磁贴放大一次,显示5秒钟,然后最小化。 不仅如此,我还需要能够在夜幕降临时添加照片/媒体,并将其显示在页面上,而又不影响所展示媒体的顺序
1回复

jQuery Carousel Flex 3D轮播

我已经实现了该轮播,该轮播工作正常,但是当我单击所有图像时,将我带回到轮播的开头,该轮播将所有图像旋转回第一张图像。 我在这里设置了一个jsfiddle来显示问题- http://jsfiddle.net/s0h28mop/6/ 我认为问题可能出在这里。 任何帮助将不胜感激!
2回复

是否有符合这些条件的jQuery画廊/幻灯片显示插件?

谁能指出我符合这些条件的jQuery幻灯片/画廊插件的方向(或可以通过设置其选项进行自定义)? 可以插入div-不能显示弹出窗口 没有边框/缩略图/文件名/按钮-显示元素时,仅此而已 我需要能够将画廊的最大高度和宽度设置为页面尺寸的百分比。 如果要显示图像,则需要调整