jQuery循环功能并从头开始-翻转功能 [英] jQuery loop function and start from beginning - flip function

问题描述

代码如下: http://jsfiddle.net/VW8V5/1/

当悬停时，它应该开始循环，但是在循环结束时，它只显示img3和img4(将img3循环到img4)，它应该从头开始.悬停时，它应该停在img1.

解决方案

这将循环显示所有四个图像.我不确定当您停止将鼠标悬停在其他位置以停止图像循环时想要达到的目的.

/* FOR PEOPLE LIST ITEMS */
$(".box a").hover(
    function () {
        var self = $(this);
        self.data("hover", true);
        function flip() {
            var top = self.closest(".box");
            var next = top.find(".current").next("img");
            if (!next.length) {
                next = top.find("img:first");
            }
            top.find("img").hide().removeClass("current");
            next.addClass("current").show().flip({
                direction:'tb',
                speed: 200,
                onEnd: function(){
                    if (self.data("hover")) {
                        setTimeout(flip,500);
                    } else {
                        top.find(".hidden").fadeOut("slow");
                        top.find(".active").fadeIn("slow");
                    }
                }
            })
        }
        flip();

    }, 
    function () {
        $(this).data("hover", false);
    }
);

在此处工作的演示: http://jsfiddle.net/jfriend00/hQnXm/

here is the code: http://jsfiddle.net/VW8V5/1/

When hover it should start looping but end of the loop somehow it shows only img3 and img4 (looping img3 to img4), it should start from the beginning. When hover out it should stop at img1.

解决方案

This will cycle through all four images. I'm not sure what you were trying to accomplish when you stop hovering other that to stop the cycle of the images.

/* FOR PEOPLE LIST ITEMS */
$(".box a").hover(
    function () {
        var self = $(this);
        self.data("hover", true);
        function flip() {
            var top = self.closest(".box");
            var next = top.find(".current").next("img");
            if (!next.length) {
                next = top.find("img:first");
            }
            top.find("img").hide().removeClass("current");
            next.addClass("current").show().flip({
                direction:'tb',
                speed: 200,
                onEnd: function(){
                    if (self.data("hover")) {
                        setTimeout(flip,500);
                    } else {
                        top.find(".hidden").fadeOut("slow");
                        top.find(".active").fadeIn("slow");
                    }
                }
            })
        }
        flip();

    }, 
    function () {
        $(this).data("hover", false);
    }
);

Working demo here: http://jsfiddle.net/jfriend00/hQnXm/

这篇关于jQuery循环功能并从头开始-翻转功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！