Question

我有一个看起来像这样的滑块（注意内容/图像是相同的图像，只有一个大图像，左边有较小的按钮）

按钮1 | CONTENT / IMAGE

按钮2 |内容/图片

按钮3 | CONTENT / IMAGE

按钮4 | CONTENT / IMAGE

左侧的按钮和内容显示在右侧，每个按钮显示不同的div。所以问题是，我需要循环，一旦点击一个按钮就停止循环，只显示信息。我在这方面遇到了很多麻烦，但循环工作但我无法使按钮工作。

注意：中间的悬停部分不再是真正需要的（已经不存在了），但是我已将其留下并加星标注，这对它的工作有点重要。

这是我的代码：

//the variables
var i = 1;
var myTimer;

function myLoop() {
    //hide everything
    $(".nHstuff").hide();
    $(".nH").removeClass("active");
    //show just the stuff we want
    $("#nHstuff" + i).fadeTo('slow', 1);
    $("#nH" + i).addClass("active");
    //increment variables
    i++;

    if (i == 5) {
        i = 1;
    }

    //the timer      
    myTimer = setTimeout(myLoop, 5000);
}
//start the loop
myLoop();

/*//what to do if hovered over an item
$(".nH").click(function() {
    clearTimeout(myTimer);
    // clear content
    $(".nHstuff").hide();
    $(".nH").removeClass("active");
    // show content
    $("#nHstuff" + (this.id.substr(this.id.length - 1))).show();
});

$(".nH").mouseout(function() {
    myLoop();
});*/


    clearTimeout(myTimer);
    i = this.id.substr(this.id.length - 1, 1);
    //show just the stuff we want
    $("#nHstuff" + i).show();
    $("#nH" + i).addClass("active");
    // To start looping again, call myLoop
});

Jquery滑块与按钮

0 个答案: