Question

我有以下结构......

<div id="displaySlider">
  <div class="slideItem" id="idA">....</div>
  <div class="slideItem" id="idB">....</div>
  <div class="slideItem" id="idC">....</div>
  <div class="slideItem" id="idD">....</div>
</div>
<ul id="menuSlider">
  <li><a href="#" rel="pintor"></a></li>
  <li><a href="#" rel="pedreiro"></a></li>
  <li><a href="#" rel="marceneiro"></a></li>
  <li><a href="#" rel="gesseiro"></a></li>
</ul>

当页面加载时我点击第一项。
$('#menuSlider li a:first').trigger('click');

我需要每隔X秒创建一个jquery，然后单击下一个项目并返回到最后一个。

Answer 1

如果我理解你的问题，我想你可以这样做：

var links = $('#menuSlider a');
var currentIndex = -1;

var click = function() {
    currentIndex++;

    if (links.length == currentIndex) {
        currentIndex = 0;
    }

    $(links[currentIndex]).trigger('click');
    console.log(links[currentIndex]);
};

if (links.length) {
    setInterval(click, 1000);
}

Answer 2

谢谢！就是这样。当鼠标滑过Slider区域时，我做了一个小改动来停止转换：

var links = $('#menuSlider a');
var currentIndex = -1;  
var click = function() {
    currentIndex++;

    if (links.length == currentIndex) {
        currentIndex = 0;
    }
    $(links[currentIndex]).trigger('click');
    console.log(links[currentIndex]);
};
if (links.length) {
    interval = setInterval(click, 2000);
}
$('#wrapSlider').hover(function() {
    interval = clearInterval(interval);
}, function() {
    interval = setInterval(click, 2000);
});

SetInterval到菜单中的AutoClick

2 个答案: