jQuery中的简单自动幻灯片放映 [英] Simple automated slideshow in jQuery

问题描述

我有一个简单的幻灯片，到目前为止可以正常运行.它由一个寻呼机和要显示的图像组成.两者都是无序列表:

i have a simple slideshow which is working okay so far. it consists of a pager and the images to display. both are an unordered list:

<ul id="keyvisualpager">
    <li><a><span>Show Keyvisual 1</span></a></li>
    <li><a><span>Show Keyvisual 2</span></a></li>
    <li><a><span>Show Keyvisual 3</span></a></li>               
</ul>

<ul id="keyvisualslides">
    <li><img src="index_files/mbr_keyvisual1.jpg" alt="Keyvisual" /></li>
    <li><img src="index_files/mbr_keyvisual2.jpg" alt="Keyvisual" /></li>
    <li><img src="index_files/mbr_keyvisual3.jpg" alt="Keyvisual" /></li>
</ul>

相应的jQuery代码为:

The according jQuery code is:

$('#keyvisualpager li a').click(function () { 

    // get position of a element
    var mbr_index = $(this).parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 1;

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

});

最初，所有图像均设置为显示:无； ...单击#keyvisualpager中的链接，然后显示相应的图像.同时指示器也会相应更改.

initially all images are set to display: none; ... upcon clicking a a link in #keyvisualpager the according image is then displayed. at the same time the indicator changes accordingly.

现在，我的问题:

除了这种浏览图像的模式之外，我还需要整个幻灯片自动前进.我该如何做到这一点:

apart from this mode of navigating through the images i need the whole slideshow to automatically advance. how can i achieve that:

a)说5秒后显示下一张图片，

a) the next image is shown after lets say 5 seconds and

b)将".keyvisualactive"类添加到#keyvisualpager中的相应元素中

b) the class ".keyvisualactive" is added to the according a element in #keyvisualpager

注意:不幸的是我不得不使用jquery 1.2.1，更新不是一种选择.

note: unfortunately i have to use jquery 1.2.1, updating is not an option.

感谢您的帮助人员

编辑

我现在正在使用此代码.它几乎可以正常工作.但是在显示集合中的最后一张图像后:我如何告诉它从第一张图像开始?谢谢！

i am now using this code. it almost works. but after the last image in the set is displayed: how can i tell it to start over with the first image? thanks!

var reload = setInterval(function(){
    // get position of a element
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length;
    var mbr_targetkeyvisual = mbr_index + 2;
    // alert(mbr_index+'//'+mbr_targetkeyvisual)

    // hide current image and show the target image
    $('#keyvisualslides li:visible').hide();        
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();

    // remove active class from current indicator and add the same class to target indicator
    $('#keyvisualpager li a').removeClass('keyvisualactive');
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

}, 2000);

推荐答案

您可以使用JavaScript的setInterval()方法来实现.

You can use JavaScript's setInterval() method to achieve this.

var reload = setInterval(function(){
            // do something
}, 5000);

数字是每个暂停的长度(以毫秒为单位).

The number is length of every pause in milliseconds.

要停止幻灯片播放(例如，当用户选择图像时)，可以使用clearInterval()方法.

To stop the slideshow, for example when a user selects an image, you can use clearInterval() method.

编辑

尝试这样的事情:

$('#keyvisualpager li a').click(function () {

    var reload = setInterval(function(){

        // get position of a element
        var mbr_index = $(this).parent().prevAll().length;
        var mbr_targetkeyvisual = mbr_index + 1;

        // hide current image and show the target image
        $('#keyvisualslides li:visible').hide();        
        $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show()

        // remove active class from current indicator and add the same class to target indicator
        $('#keyvisualpager li a').removeClass('keyvisualactive');
        $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive');

    }, 5000);

    $('#pagerstop').click(function(){
        clearInterval(reload);
    }

});

编辑2

您必须跟踪图像计数和所处的索引(如果我理解正确，您可以在var mbr_targetkeyvisual中找到它吗?)，它应该可以这样工作(未经测试):

You have to keep track of image count and the index you are at (if I understood correctly you have this in your var mbr_targetkeyvisual?) so it should work like this (not tested):

// Image count
var content_length = $('#keyvisualslides').children().length;

var automate = setInterval(function(){
    if(index < content_length){
        $('#keyvisualslides li:visible').hide();        
        $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();
        mbr_targetkeyvisual++;
    }
    else{
        mbr_targetkeyvisual = 0;
        $('#keyvisualslides li:visible').hide();
        $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show();
        mbr_targetkeyvisual++;
    }
}, 5000);

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