跟踪单击图像列表中的哪个图像?

我就是这样做的。在这种情况下,唯一需要的全局是currentplayorder,它可以作为首选项或配置模型的一部分存储某人。

首先是HTML。我将视频源移动到相关缩略图的rel属性中。我假设您的应用程序正在生成缩略图,在这种情况下,这将是一种合适的方法,因为生成缩略图HTML的任何内容都可以了解相关的视频源。

<div class="thumbs">
    <img id="vt_0" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoA"/>
    <img id="vt_1" src="http://serverfault.com/content/img/sf/logo.png"   rel="videoB"/>
    <img id="vt_2" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoC"/>
    <img id="vt_3" src="http://serverfault.com/content/img/sf/logo.png"   rel="videoD"/>
    <img id="vt_4" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoE"/>
    <img id="vt_5" src="http://serverfault.com/content/img/sf/logo.png"   rel="videoF"/>
    <img id="vt_6" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoG"/>
</div>

现在JS。注意使用 previousSibling 和 nextSibling 要确定播放顺序:

<script type="text/javascript">

var PLAY_ORDER_BACKWARD = "previousSibling";
var PLAY_ORDER_FORWARD  = "nextSibling";

var currentPlayOrder = PLAY_ORDER_FORWARD;

$(document).ready(function() {
    $(".thumbs img").each(function(i, node) {
        $(node).click(function() {
            playVideo(this.getAttribute("rel"), this);
        });
    });
});

var playVideo = function(source, thumbNode) {
    console.log("Play video %s", source);
    onVideoFinish(thumbNode);
    // If your video play accepts a callback, you may need to pass it as
    // function() { onVideoFinish(thumbNode); }
}

var onVideoFinish = function(thumbNode) {
    // Get the next img node (if any) in the appropriate direction
    while ( thumbNode = thumbNode[currentPlayOrder] ) {
        if ( thumbNode.tagName == "IMG" ) { break; }
    }

    // If an img node exists and it has the rel (video source) attribute
    if ( thumbNode && thumbNode.getAttribute("rel") ) {
        playVideo(thumbNode.getAttribute("rel"), thumbNode);
    }
    // Otherwise, assume that there are no more thumbs/videos in this direction
    else {
        console.log("No more videos to play");
    }
}
</script>

希望有帮助。

我会这样做的。

与其将视频名称存储在数组中,为什么不将视频名称与缩略图一起存储? 可以使用class属性存储视频的名称。

一旦采用这种方法,事情就会变得简单。

<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" class="xxx00"/>
<img id="vt_1" src="thumbxxx01.jpg" class="xxx01"/>
<img id="vt_2" src="thumbxxx02.jpg" class="xxx02"/>
<img id="vt_3" src="thumbxxx03.jpg" class="xxx03"/>
<img id="vt_4" src="thumbxxx04.jpg" class="xxx04"/>
<img id="vt_5" src="thumbxxx05.jpg" class="xxx05"/>
<img id="vt_6" src="thumbxxx06.jpg" class="xxx06"/>
</div>

<script type="text/javascript">

    function setupVideoPlayer(order)
    {
        //lastThumb won't be accessible from outside of setupVideoPlayer 
        //function.
        var lastThumb = null;
        var imageSelector = 'div.thumbs img';

        function playVideo(video)
        {
            //Play the video.
            onVideoFinish();
        }

        function onVideoFinish()
        {
            //If order is 'ascending', we will go to the 'next'
            //image, otherwise we will go to 'previous' image.
            var method = order == 'asc' ? 'next' : 'prev';

            //When user is at the end, we need to reset it either at the 
            //first image (for ascending) or the last (for descending). 
            var resetIndex = order == 'asc' ? 0 : $(imageSelector).length - 1;

            //When video has finished playing, we will try to 
            //find the next/prev (depending upon order) sibling of 'lastThumb', 

            //If we can not find any sibling, it means we are at the
            //last/first thumbnail and we will go back and fetch the first/last
            //image. 

            //Also, instead of calling the playVideo method, we will
            //fire the click event of thumbnail. This way, if you decide to
            //do something in future (say playing an ad before the video)
            //you only need to do it in your click handler.            

            if($(lastThumb)[method]().length == 0)
                $(imageSelector).get(resetIndex).click();
            else
                $(lastThumb)[method]().click(); 

        }

        $j(imageSelector)
            .click(
                function()
                {
                    //on click, we store the reference to the thumbnail which was 
                    //clicked.
                    lastThumb = this;

                    //We get the name of the video from the class attribute
                    //and play the video. 
                    playVideo($(this).attr('class'));
                }
              );
    }

    $(document).ready(
        function() { setupVideoPlayer('asc'); }
    );

</script>

以上代码的优点是,您可以修改您的HTML,它将自动播放这些视频。

您可以使用锚标记包装图像,并使用onclick方法,如下所示:

<a href="java script:;" onClick="playVideo(0)"><img src="thumbxxx00.jpg" /></a>
<a href="java script:;" onClick="playVideo(1)"><img src="thumbxxx01.jpg" /></a>
...