自动手风琴

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/