Question

我正在努力让手风琴菜单自动循环，我不断发现的每一件事都非常模糊。我找到了几个答案，说我可以使用循环插件循环，这就是我尝试过的。我不能让循环功能正常工作。我是以正确的方式去做的，如果是的话，我在代码中错过了什么？

我是jQuery的新手，所以这对我来说有点压倒性的。感谢。

<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 380;
minWidth = 50;  

$("#slide ul li a").hover(
  function(){
    $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
  }
);
});
 $(function() {
$('#slide').cycle({ 
  fx:     'slideY', 
  easing: 'bounceout', 
  delay:  -4000 
});
});
  </script>

<div id="slide" class="cycle">
<ul>
  <li>
    <a id="a1">
      <img src="image" />
    </a>
  </li>
  <li>
    <a>
       <img src="image" />
    </a>
  </li>
  <li>
    <a>
      <img src="image" />
    </a>
  </li>
  <li>
    <a>
      <img src="image" />
    </a>
  </li>
</ul>
</div>

Answer 1

所以我不确定这是否正是您所寻找的，但我写了一个快速的解决方案，希望能帮助您找到解决方案：

<强> HTML

<div id="slide" class="cycle">
    <ul>
        <li>
            <a id="a1">
                <img src="image" />
            </a>
        </li>
        <li>
            <a id="a2">
                <img src="image" />
            </a>
        </li>
        <li>
            <a id="a3">
                <img src="image" />
            </a>
        </li>
        <li>
            <a id="a4">
                <img src="image" />
            </a>
        </li>
    </ul>
</div>

<强>的jQuery

var lastBlock = $("#a1");
var maxWidth = 166;
var minWidth = 35;
var counter = 0;
var myInterval = 0;

$("#slide ul li a").mouseenter(

function() {
    $(lastBlock).animate({
        width: minWidth + "px"
    }, {
        queue: false,
        duration: 400
    });
    $(this).animate({
        width: maxWidth + "px"
    }, {
        queue: false,
        duration: 400
    });
    lastBlock = this;
    clearInterval(myInterval);
}).mouseleave(function() {
    myInterval = setInterval(doSomething, 4000);
});

function doSomething() {
    var i = counter++ % 4 + 1;
    $("#a" + i).trigger("mouseenter");
    $("#a" + i).trigger("mouseleave");
}

myInterval = setInterval(doSomething, 4000);

因此，在此解决方案中，间隔设置为循环并触发事件mouseenter()和mouseleave()。由于您可能不希望图像在鼠标悬停在元素上时循环，因此在mouseenter()时会清除间隔并在mouseleave()期间再次设置。可以重构的一个令人困惑的部分是它使用具有模数运算的计数器循环图像的方式。请注意，我为每个<a>添加了一个ID，最后对数字进行了增量更改。

在此处查看：http://jsfiddle.net/Ck3aZ/

自动手风琴

1 个答案: